首页 > 编程笔记 > JavaScript笔记

JS实现倒计时效果

在电商网站上，我们经常会看到某个商品的促销活动倒计时。这种“倒计时”效果一般是使用 JS 实现的，实现的原理是通过 Date 对象分别获取活动开始时间和活动结束时间，然后计算两个时间差，得到的时间差是一个单位为毫秒的数值。

通过对该时间差执行一系列的取模、除法等算术运算，同时调用 Math 对象的相关方法，就可将其分别折合为天数、小时数、分钟数和秒数。对时间差及其折合运算添加定时器后则可以实现时间差的动态变化，一旦时间差等于 0，则清除定时器，使时间差不再变化。

下面通过使用例 1 来模拟电商网上的倒计时效果。

【例 1】使用定时器、Date 对象和 Math 对象实现倒计时效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用定时器、Date对象和Math对象实现倒计时效果</title>
<script>
     window.onload = function(){
         aInp = document.getElementsByTagName('input');
         var iNow = null
         var iNew = null
         var str = '';
         var timer = null;
        
         aInp[2].onclick = function(){
         clearInterval(timer);
         iNew = new Date(aInp[0].value);
         timer = setInterval(function(){
              iNow = new Date();
              t = Math.floor((iNew-iNow)/1000);
              if(t >= 0){
                  str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+
                       Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
                  aInp[1].value = str;
              }else{
                   clearInterval(timer);
              }
         },1000);
         };
     };
</script>
</head>
<body>
  距离：<input type="text" size="30"><br>
  还剩：<input type="text" size="30">
  <input type="button" value="开始倒计时">
</body>
</html>

在倒计时时，结束时间是固定的，但开始时间是不断变化的，所以，对倒计时中的开始时间需要使用定时器来动态获取。该示例使用了间歇定时器，在该定时器中，代码 Math.floor((iNew-iNow)/1000) 中的 iNew-iNow 得到一个单位为毫秒的时间差，(iNew-iNow)/1000 将时间差换算为可能包含小数的秒值，使用 Math.floor() 对该秒值进行向下取整运算得到一个整数的秒值。

定时器最后获得的时间差是不断变化的，当时间差为非负数时，将其折合成天数、小时数、分钟数和秒数，对应的 JS 代码分别为：Math.floor(t/86400)、Math.floor(t%86400/3600)、Math.floor(t%86400%3600/60) 和 t%60。折合后的时间串成一个字符串后显示在第 2 个文本框中；当时间差为负数时，取消定时器，使文本框中的时间差不再变化。

需要特别注意的是，定时器如果是由事件控制的话，必须先清除定时器，然后再开定时器，否则当事件多次触发时会出现异常，这就是例 1 的按钮单击绑定的事件处理函数中的第 1 行代码即清除定时器的原因。

例 1 在 Chrome 浏览器中的运行结果如图 1 所示。

图 1：倒计时效果

JS实现倒计时效果

所有教程

优秀文章