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

实现过程大致分为三步:

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

这里分几种情况:

  • 输入参数为时间戳,单位为秒
var endDate = 1637881200; // 2021-11-26 00:00:00
var leftTime = endDate * 1000 - new Date();

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

  • 输入参数为日期字符串
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() 函数用法