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/