JavaScript实现页面倒计时器的方法

作者：纸飞机时间：2026-10-29 23:10:47浏览：70

本文介绍如何使用JavaScript制作页面倒计时器。通过计算未来时间与当前时间的毫秒差，利用setInterval函数每隔1秒执行一次更新逻辑，动态显示剩余的天、时、分、秒。

JavaScript实现页面倒计时器的方法

构建页面倒计时功能，指定目标未来时刻，计算出剩余的天、小时、分钟及秒数。

通过计算两个时间点之间的毫秒差来推导天数、小时数、分钟数和秒数。为提升代码简洁性，对逻辑进行了函数封装。

1.setInterval(,1000)用于执行倒计时逻辑，每间隔1000毫秒循环触发一次，从而达成持续倒计时的视觉效果。

2.关于获取毫秒值的具体方法，此前发布的JavaScript时间对象相关文章中已有详细阐述。

3.在setInterval()内部调用countdown函数时，不应添加括号，否则会导致函数立即执行而非按周期调用，进而致使倒计时功能失效。

注意：1000ms = 1s

 &lt;!-- 文本显示标签 --&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;script&gt;
        var p = document.querySelector('p');    //获得p标签事件
        var endtime = new Date('2022-7-31 12:00:00').getTime(); //未来时间的毫秒值
        setInterval(countdown,1000);    //倒计时函数
        function countdown(){
            var nowtime = new Date().getTime(); //现在时间的毫秒值
            var time = endtime - nowtime;   //两个时间的毫秒值差，用于下面时间的计算
            var day = parseInt(time/(1000*60*60*24));  //天数
            var hour = parseInt(time/(1000*60*60)%24);  //小时数
            var minute = parseInt(time/1000/60%60);     //分钟数
            var seconds = parseInt(time/1000%60);       //秒数
            p.innerText = day+'天'+hour+':'+minute+':'+seconds;     //把内容添加到p标签中
    }
        
    &lt;/script&gt;

结果展示：

JavaScript实现页面倒计时器的方法

至此，关于JavaScript实现页面倒计时器的教程结束，如需了解更多JavaScript 页面倒计时器相关内容，请查阅本站历史文章或继续浏览后续教程，感谢大家的支持！

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28