网页中的倒计时原理

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

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

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

我们分析一下：现在的时间点是变的，未来的某个时间点是不变的，所以剩余时间是一直变化的。我们假设有一个变量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

结果如下：

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前端这条道路上共勉。