PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看春节创意投稿大赛
春节倒计时
哈喽大家好,我是Starqin,一名前端小白。同时也在努力学习javascritp。从初中开始我的数学就不太好,所以对于计算类型的事物,我都不感兴趣,比如我就不能清楚的记得当下距离春节还有多少天,于是我写了今天要分享的这个小案例——春节倒计时
这个小案例的关键就在于定时器的使用以及js日期对象的使用、设置、转换。
js的定时器setInterval
setInterval是一个函数,可以接收两个参数,第一个参数是回调函数、第二个参数是一个数值类型的参数,规定多长时间执行一次前面的回调函数,单位是毫秒
setInterval(function(){
console.log(1)
},1000);
以上代码的意思就是每一秒执行一次打印1
有了这个函数我们就可让程序自己动起来,而且是每一秒执行一次。
js的日期对象 Date
js的日期对象是需要通过js内置的Date()构造函数实列化出来的
实例化日期对象(获取当前时间)
const nowDate = new Date();
实例化后的对象,也是当前的时间,由于我们需要做倒计时功能,因此需要进行计算,所以,可以将获取到的时间直接转换为时间戳,然后用时间戳去计算。
日期格式转时间戳的方法
nowDate.getTime();
我们拿到当前时间后,还不能直接得出距离春节的时间,因为程序还不知道春节是哪一天,所以我们还需要告诉程序2022年的春节是哪一天
日期对象设置时间
const endDate = new Date('2022/2/1 0:0:0');
时间差的计算
在知道当前时间和结束时间后,我们需要将这个两个时间转换为时间戳,方便计算
let now = nowDate.getTime();
let end = endDate.getTime();
//时间差=结束时间-当前时间
let cha = end - now;
时间戳换算
当我们计算之后将会得到一个时间差,这个时间差还是一个时间戳,所以我们需要进一步的处理,将这个结果转换为天,时,分,秒
由于js的时间单位时毫秒,所以我们在这里可以将时间戳先除以1000,得到一个按秒计算的时间戳
cha = cha / 1000;
根据时间进制得知,一秒=1s,一分钟=60s,一小时=3600s,一天=86400s,由此我们进行换算
//将时间戳转换为天
var d = cha / 86400;
//将时间戳转换为时
var h = cha % 86400 / 3600;
//将时间戳转换为分
var ms = cha % 3600 / 60;
//将时间转换为秒
var s = cha % 60;
为了方便大家理解,上面的转换,大家可以这样记
最大单位 = 总数 / 最大单位进制
本单位 = 总数 % 上一级单位进制 / 本单位进制
时间差计算完成之后,我们只需要将其放入定时器的回调函数中即可。这样我们就能实现每一秒钟计算一次,然后将计算的结果渲染到页面就完成啦。
本程序优化
由于定时器是一直执行的,所以时间也会一直计算,当我们过了春节之后,由于时间还在计算,可能会出现负数,这种情况也是一种BUG。所以我们需要在倒计时等于0的时候,让程序停止。
停止上面这个程序,其实也就是清除定时器
清除定时的前提
定时器要保存在一个变量当中
const t = setInterval(function(){
console.log(1)
},1000);
清除定时器的方法
clearInterval();
或clearTimeout();
clearInterval(t);
/*clearTimeout(t);*/
注意:不论是定时器还是延时器都可以用clearInterval();
或clearTimeout();
清除
好啦,接下来上代码
//封装获取元素的函数
function getEle(obj) {
var list = [];
list = document.querySelectorAll(obj);
if (list.length > 1) {
return list;
} else if (list.length == 1) {
return list[0];
} else {
console.warn('没有捕获到' + obj);
}
}
//获取页面元素
var d = getEle('#d');
var h = getEle('#h');
var m = getEle('#m');
var s = getEle('#s');
//两个时间相减
// 封装一个计算函数
function comTime(endTime) {
var obj = new Object();
var date = new Date();
var setDate = new Date(endTime);
var now = date.getTime();
var end = setDate.getTime();
if (now > end) {
var remain = date - setDate;
//将剩余时间转换为秒数
var remain = remain / 1000;
//转换为天 一天等于86400秒 需要取整
obj.D = parseInt(remain / 86400);
obj.D = obj.D >= 10 ? obj.D : '0' + obj.D;
//转换为时 一小时等于3600秒
obj.H = parseInt(remain % 86400 / 3600);
obj.H = obj.H >= 10 ? obj.H : '0' + obj.H;
//转为分 一分钟等于60秒
obj.M = parseInt(remain % 3600 / 60);
obj.M = obj.M >= 10 ? obj.M : '0' + obj.M;
//转为秒
obj.S = parseInt(remain % 60 / 1);
obj.S = obj.S >= 10 ? obj.S : '0' + obj.S;
return obj;
} else if (now < end) {
var remain = setDate - date;
//将剩余时间转换为秒数
var remain = remain / 1000;
//转换为天 一天等于86400秒 需要取整
obj.D = parseInt(remain / 86400);
obj.D = obj.D >= 10 ? obj.D : '0' + obj.D;
//转换为时 一小时等于3600秒
obj.H = parseInt(remain % 86400 / 3600);
obj.H = obj.H >= 10 ? obj.H : '0' + obj.H;
//转为分 一分钟等于60秒
obj.M = parseInt(remain % 3600 / 60);
obj.M = obj.M >= 10 ? obj.M : '0' + obj.M;
//转为秒
obj.S = parseInt(remain % 60 / 1);
obj.S = obj.S >= 10 ? obj.S : '0' + obj.S;
return obj;
}
}
// 让程序自己走起来
var t = setInterval(function() {
var remainTime = comTime('2022/2/1 0:0:0');
d.innerHTML = remainTime.D;
h.innerHTML = remainTime.H;
m.innerHTML = remainTime.M;
s.innerHTML = remainTime.S;
if (remainTime.D == '00' && remainTime.H == '00' && remainTime.M == '00' && remainTime.S == '00') {
clearInterval(t);
}
console.log(remainTime);
}, 1000);
css代码和html代码我就不在此复述啦!如有需要请在评论区留言。最后,祝点开这篇文章,且积极上进的你新年快乐,万事大吉。