迹忆客 专注技术分享

在网页中我们可以看到很多的倒计时效果，这个实现原理也很简单。
 

倒计时指的是距离未来某个时间点的时间间隔。
 

所以：剩余时间=未来时间-现在时间；
 

我们分析一下：现在的时间点是变的，未来的某个时间点是不变的，所以剩余时间是一直变化的。我们假设有一个变量t
 

Var iNow=new Date();  //现在时间
Var iNew=new Date(2015,11,18,9,0,0); //未来某个时间点

说明：创建Date时间对象参数

数字形式：new Date(2015,11,18,9,0,0)   //其中月份从0开始计算的
 

字符串形式：new Date(“december 12,2015 8:53:12”)
 

剩余时间var t=Math.floor((iNew-iNow)/1000)
 

下面分别计算天，时，分，秒
 

天：Math.floor(t/86400)
时：Math.floor(t%86400/3600)
分：Math.floor(t%86400%3600/60)
秒：Math.floor(t%60)

我们定义一个字符串用来暂时存储剩余时间
 

Var str=Math.floor(t/86400+”天”+Math.floor(t%86400/3600)+”时”
+Math.floor(t%86400%3600/60)+”分”+Math.floor(t%60)+”秒”

我们先把这个时间放在网页中：
 

Var body=document.body;
body.innerHTML=str;

现在有一个问题，这个时间是固定不变的，只有刷新一次才变一次，我们不可能做到每次都刷新页面看剩余时间，我们希望的是过一秒就变一次，这就用到了js中的定时器setinterval
结果如下：
 

<script>
window.onload=function(){
       var obody=document.body;
       var iNew = new Date(2015,11,18,15,50,40);
       var iNow=null;
       var t=0;
       var str="";
       setInterval(function(){
              iNow = new Date();
              t = Math.floor((iNew - iNow)/1000);
              str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
              obody.innerHTML=str; 
       }, 1000)
      
}
</script>

以上只是倒计时的一个简单的实现原理，当然网上还有各种各样的倒计时效果，但是万变不离其宗，只要掌握了原理，实现其他的效果才更容易上手，望我们在web前端这条道路上共勉。