很多团购网站、抢购网站都有倒计时的功能,其实这些动态倒计时都是通过js代码实现的,js中setInterval()方法会不停的调用指定函数,这样就能很轻易地实现倒计时功能。
恰好,本站就有一个倒计时的页面,相关效果可参考:http://www.webym.net/special.html
下面一段是倒计时的全部js代码,代码逻辑很简单,易理解。
<SCRIPT LANGUAGE="JavaScript"> function _fresh() { var endtime=new Date("2016/12/13,22:50:12"); var nowtime = new Date(); var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000); __d=parseInt(leftsecond/3600/24); __h=parseInt((leftsecond/3600)%24); __m=parseInt((leftsecond/60)%60); __s=parseInt(leftsecond%60); document.getElementById("times").innerHTML=__d+"天 "+__h+"小时"+__m+"分"+__s+"秒"; if(leftsecond<=0){ document.getElementById("times").innerHTML="抢购已结束"; clearInterval(sh); } } _fresh() var sh; sh=setInterval(_fresh,1000); </SCRIPT>
首先计算出当前时间距离到期时间的差额,然后分别计算出天、时、分和秒。再通过setInterval方法调用函数不停的刷新数据。
HTML代码
<div id="content"> <h1>限时抢购啦!</h1> <p>还剩<span id="times"></span></p> </div>
通过js赋值时间到id是times的标签中。这样就简单的实现了倒计时功能。
声明:如需转载,请注明来源于www.webym.net并保留原文链接:http://www.webym.net/jiaocheng/205.html