JavaScript倒计时代码实例
JavaScript倒计时代码实例属于前端实例代码，有关更多实例代码大家可以查看。
关于倒计时效果在很多场景都有应用，例如高考倒计时或者书奥运倒计时，下面就详细介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<head>
<title>javascript倒计时效果-前端教程网</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style:none;
}
#show_time{
color:#f00;
font-size:24px;
font-weight:bold;
margin:100px;
}
</style>
<script type="text/javascript">
function countdown(){
var show_time=document.getElementById("show_time");
var endtime=new Date("12/31/2015 23:59:59");
var today=new Date();
var delta_T=endtime.getTime()-today.getTime();
if(delta_T<0){
clearTimeout(auto);
show_time.innerHTML="倒计时已经结束";
}
else{
var total_days=delta_T/(24*60*60*1000);
var total_show=Math.floor(total_days);
var total_hours=(total_days-total_show)*24;
var hours_show=Math.floor(total_hours);
var total_minutes=(total_hours-hours_show)*60;
var minutes_show=Math.floor(total_minutes);
var total_seconds=(total_minutes-minutes_show)*60;
var seconds_show=Math.floor(total_seconds);
show_time.innerHTML="距离结束还有:"+total_show+"天"+hours_show+"时"+minutes_show+"分"+seconds_show+"秒";
var auto=setTimeout(countdown,1000);
}
}
window.onload=function(){
countdown();
}
</script>
</head>
<body>
<div id="show_time"></div>
</body>
</html>
代码实现了我们需要的倒计时效果，如果已经到期那么就会给出"倒计时已经结束"的提示。
一.实现原理:
设定一个到期的时间，然后和现在的时间进行比对，通过setTimeout()函数递归调用countdown()函数，每秒比对一次，这样可以实现倒计时效果，当当前时间超过指定时间时，就停止setTimeout()函数的执行，并且给出提示。
二.代码注释:
（1）.function countdown(){}，声明一个函数用于进行倒计时效果。
（2）.var show_time=document.getElementById("show_time")，获取id属性值为show_time的元素对象。
（3）.var endtime=new Date("12/31/2015 23:59:59")，设定倒计时的到期时间。
（4）.var today=new Date()，创建一个时间对象，用于获取当前时间。
（5）.var delta_T=endtime.getTime()-today.getTime()，获取指定到期时间和当前时间的时间差，以秒计算。关于getTime()方法参阅JavaScript getTime()一章节。
（6）. if(delta_T<0)，如果小于零，说明已经到期。
（7）.clearTimeout(auto)，停止setTimeout()函数的执行。
（8）.show_time.innerHTML="倒计时已经结束"，将show_time的内容设置为"倒计时已经结束"。
（9）.var total_days=delta_T/(24*60*60*1000)，delta_T是间隔时间的总秒数，而24*60*60*1000是一天的总秒数，这样就计算出剩余的天数。
（10）.var total_show=Math.floor(total_days)，获取剩余的天数，这里要注意的是使用了Math.floor()函数进行下舍入，因为只有这样才可以计算剩余的小时和下面更小的时间单位。
（11）.var total_hours=(total_days-total_show)*24，总天数减去下舍入的天数然后再乘以24（一天的小时数）就得出了剩余的小时数。下面计算分钟，秒数也是如此，这里就不多介绍了。
（12）.show_time.innerHTML="距离结束还有:"+total_show+"天"+hours_show+"小时"+minutes_show+"分"+seconds_show+"秒"，将剩余的事件写入show_time中。
（13）.var auto=setTimeout(countdown,1000)，每隔1秒递归调用一次countdown()函数。
（14）.window.onload=function(){}，当文档完全加载完成再去执行函数中的代码。
（15）.countdown()，调用此函数。
三.相关内容:
（1）.Math.floor()方法参阅JavaScript Math.floor()一章节。
（2）.setTimeout()方法参阅setTimeout()一章节。
JavaScript倒计时代码实例，这样的场景在实际项目中还是用的比较多的，关于JavaScript倒计时代码实例就介绍到这了。