JS 实现倒计时时间（天数、时、分、秒）

JS 要实现页面倒计时时间效果，主要用到三个函数，一个是 JS 的日期对象 new Date()，一个是 JS 的取整函数 parseInt，最后是一个定时器 setInterval()。如果输入参数为计算好的倒计时时间戳（秒或者毫秒），则日期对象也可以省略。

实现过程大致分为三步：

首先是计算输入的时间戳与当前时间的差值（单位：毫秒）。如果输入参数即为差值本身，可以忽略这一步。

这里分几种情况：

输入参数为时间戳，单位为秒

var endDate = 1637881200; // 2021-11-26 00:00:00
var leftTime = endDate * 1000 - new Date();

[notice]new Date() 输出日期对象，在与其他整数运算时，会自动转化为整数，单位毫秒，相当于 new Date().getTime()。[/notice]

输入参数为日期字符串

var endDate = "2021-11-26 00:00:00";
var leftTime = new Date(endDate) - new Date();

输入参数为年、月、日、时、分、秒

var year = 2021,month=11,day=26,hour=minute=second=0;
var leftTime = new Date(year,month-1,day,hour,minute,second) - new Date();

之后就是针对差值计算倒计时的天数、时、分、秒了。默认选择用 parseInt()，比较常见。这里也可以使用 Math.floor() 函数，向下取整，效果是一样的。

var d,h,m,s; // 存储天数、时、分、秒
if (leftTime >= 0) {
    d = parseInt(leftTime/1000/60/60/24);
    h = parseInt(leftTime/1000/60/60%24);
    m = parseInt(leftTime/1000/60%60);
    s = parseInt(leftTime/1000%60);
}

这样计算的结果是整型的，如果想要保 0，可以在加一个判断处理分支：

function checkTime(i){ //将 0-9 的数字前面加上 0，例 1 变为 01 
    if(i<10) { 
        i = "0" + i; 
    }
    return i; 
}

最后就是让倒计时动起来了，这边采用 setInterval() 函数。因为是循环调用，所以使用 setTimeout() 效果也是差不多的。

综上，完整版倒计时实现函数：

var _ordertimer = null; // 定时器
var endDate = "2021-11-26 00:00:00"; // 截止日期
function leftTimer() {
    var leftTime = new Date(endDate) - new Date(); //计算剩余的毫秒数
    var d = parseInt(leftTime / 1000 / 60 / 60 / 24); //计算剩余的天数
    var h = parseInt(leftTime / 1000 / 60 / 60 % 24); //计算剩余的小时
    var m = parseInt(leftTime / 1000 / 60 % 60); //计算剩余的分钟
    var s = parseInt(leftTime / 1000 % 60); //计算剩余的秒数
    d = checkTime(d); // 保 0
    h = checkTime(h); // 保 0
    m = checkTime(m); // 保 0
    s = checkTime(s); // 保 0
    if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) {
        document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
    }
    if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
        window.clearInterval(_ordertimer);
        _ordertimer = null;
    }
}
function checkTime(i) { // 将 0-9 的数字前面加上 0，例 1 变为 01
    if(i<10) {
        i = "0" + i;
    }
    return i;
}
_ordertimer = setInterval(function(){leftTimer()}, 1000);

参考：JS实现倒计时(天数、时、分、秒)、JS倒计时两种种实现方式

扩展阅读：微信内 js 倒计时时间显示为 00:00:00 问题解析 —— js Date() 函数用法

JS 实现倒计时时间（天数、时、分、秒）

添加新评论