很多团购网站、抢购网站都有倒计时的功能,其实这些动态倒计时都是通过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





















