现在的位置: 网页制作教程JS网页特效 >正文
JS特效教程

团购倒计时js实例代码

发表于2016/11/13 JS网页特效 0条评论 ⁄ 热度 1,776℃

很多团购网站、抢购网站都有倒计时的功能,其实这些动态倒计时都是通过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的标签中。这样就简单的实现了倒计时功能。

  • 暂无评论