春节还剩多少天?

820 阅读5分钟

PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看春节创意投稿大赛

春节倒计时

哈喽大家好,我是Starqin,一名前端小白。同时也在努力学习javascritp。从初中开始我的数学就不太好,所以对于计算类型的事物,我都不感兴趣,比如我就不能清楚的记得当下距离春节还有多少天,于是我写了今天要分享的这个小案例——春节倒计时

图片.png

这个小案例的关键就在于定时器的使用以及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代码我就不在此复述啦!如有需要请在评论区留言。最后,祝点开这篇文章,且积极上进的你新年快乐,万事大吉。