javascript倒计时代码实例

javascript倒计时代码实例:
关于倒计时效果在很多场景都有应用，例如高考倒计时或者书奥运倒计时，下面就详细介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<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的Date对象的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()函数可以参阅window对象的setTimeout()方法一章节。
3.关于时间对象可以参阅ECMAScript的Date对象一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8405

更多内容可以参阅:http://www.softwhy.com/javascript/

javascript倒计时代码实例

猜你喜欢