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倒计时代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容