JavaScript 实现动态倒计时显示功能详解

作者：青柠时间：2026-10-23 13:42:51浏览：581

本文介绍如何使用JavaScript实现动态倒计时效果。核心逻辑包括获取目标时间与当前时间的时间戳差值，通过数学运算解析出天、小时、分钟和秒数，并利用setInterval定时器每秒更新页面DOM元素，实现实时倒计时显示。

页面布局与逻辑概述

页面布局


<h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>

接下来通过JavaScript代码实现动态显示逻辑。

首先需要调用getTime()方法，获取设定日期距离1970年1月1日0时0分0秒的毫秒数。

倒计时核心算法实现

具体步骤如下：


var show=document.getElementById("show").getElementsByTagName("span");

第一步，获取用于插入数字的DOM元素位置。


var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);

第二步，分别声明当前时间对象和目标时间对象。


var num=time.getTime()-timeing.getTime();

4）计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整


var day=parseInt(num/(24*60*60*1000));

第四步，利用parseInt()函数对总毫秒数进行取整，计算天数（计算公式为：24小时×60分钟×60秒×1000毫秒）。


num=num%(24*60*60*1000);

第五步，获取去除天数后剩余的毫秒数。


var hour=parseInt(num/(60*60*1000));      
num=num%(60*60*1000);

第六步，计算小时数，并获取去除小时后剩余的毫秒数。


var minute=parseInt(num/(60*1000));
num=num%(60*1000);

第七步，计算分钟数，并获取去除分钟后剩余的毫秒数。


var seconde=parseInt(num/1000);

第八步，计算剩余的秒数。


       show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;

第九步，将计算结果更新到页面上显示。

完整源码展示

第十步，设置定时器，每隔一秒重新获取并更新一次时间数据。


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 
 <h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>
 
 <script>
  var show=document.getElementById("show").getElementsByTagName("span");
  
  setInterval(function(){
  var timeing=new Date();
  var time=new Date(2020,0,1,0,0,0);
      var num=time.getTime()-timeing.getTime();
      var day=parseInt(num/(24*60*60*1000));  
      num=num%(24*60*60*1000);
      var hour=parseInt(num/(60*60*1000));      
      num=num%(60*60*1000);
      var minute=parseInt(num/(60*1000));
      num=num%(60*1000);
      var seconde=parseInt(num/1000);
       show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;
      },100)
 </script>
 </body>
</html>

完整源码示例如下。

总结：上述内容介绍了JS动态显示倒计时效果的具体实现方法，希望对你有所帮助。如有疑问欢迎留言，小编会及时回复。感谢对本站的支持！若觉得本文对你有帮助，欢迎转载，请注明出处，谢谢。

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38