JavaScript简单倒计时效果的实现

倒计时效果

通过js内置的日期对象Date实现

效果分析：

核心算法：

1. 输入的时间减去现在的时间就是剩余的时间，即倒计时 。
2. 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3. 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）

转换公式如下：

• d = parseInt(总秒数 / 60 / 60 / 24); // 计算天数
• h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
• m = parseInt(总秒数 / 60 % 60); // 计算分数
• s = parseInt(总秒数 % 60); // 计算当前秒数

具体代码段：

  function countDown(time) {
    
    
        //现在时间的总的毫秒数
        var nowTimes = +new Date();
        //用户输入时间总的毫秒数
        var inputTimes = +new Date(time);
        //剩余时间的毫秒数
        var times = (inputTimes - nowTimes) / 1000;
        //把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
        d = parseInt(times / 60 / 60 / 24); 
        d = d < 10 ? '0' + d : d;
        h = parseInt(times / 60 / 60 % 24) 
        h = h < 10 ? '0' + h : h;
        m = parseInt(times / 60 % 60); 
        m = m < 10 ? '0' + m : m;
        s = parseInt(times % 60);  
        s = s < 10 ? '0' + s : s;
        return d+'天'+h+'时'+m+'分'+s+'秒';
    }
     // 把函数的返回值（字符串形式）渲染到body标签内
     document.body.innerHTML = countDown('2021-03-19 22:00:00')
    // 定时器 每隔1秒渲染一次
    setInterval(function () {
    
    
        document.body.innerHTML = countDown('2021-03-19 22:00:00')
    }, 1000)

实现效果：

注：在核心算法中，是不能直接拿着时分秒相减，比如 05 分减去25分，结果会出现负数的问题，正确的操作是获取总到毫秒数进行相减求差值。

欢迎阅读，希望对你有所帮助！