jQuery倒计时效果，代码很简洁
- WBOY原創
- 2016-06-07 11:38:581483瀏覽
本文以团购网站的倒计时为例，给三件商品赋予了结束时间及2016年春节结束时间。
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。我们为三件商品分别定义了结束时间戳，即class为“.endtime”属性value值。<br>
<ul> <br>
<li> <br>
<img alt="jQuery倒计时效果，代码很简洁" > <br>
美茵儿 2015韩版新款印花夏装 <br>
<p></p> <br>
</li> <br>
<li> <br>
<img alt="jQuery倒计时效果，代码很简洁" > <br>
阿米路2015夏装新款两件套 <br>
<p></p>
</li> <br>
<li> <br>
<img alt="jQuery倒计时效果，代码很简洁" > <br>
映帘2015春装女装新款 韩版 <br>
<p></p> <br>
</li> <br>
</ul>
<br>
jQuery<br>
每个商品定时100毫秒执行一次setInterval里面的代码。接着each()方法遍历计算每个商品的倒计时，单位为天、小时、分、秒。<br>
var time_current = (new Date()).valueOf(); //获取当前时间 <br>
$(function() { <br>
var dateTime = new Date(); <br>
var difference = dateTime.getTime() - time_current; <br>
<br>
setInterval(function() { <br>
$(".endtime").each(function() { <br>
var obj = $(this); <br>
var endTime = new Date(parseInt(obj.attr('value')) * 1000); <br>
var nowTime = new Date(); <br>
var nMS = endTime.getTime() - nowTime.getTime() + difference; <br>
var myD = Math.floor(nMS / (1000 * 60 * 60 * 24)); <br>
var myH = Math.floor(nMS / (1000 * 60 * 60)) % 24; <br>
var myM = Math.floor(nMS / (1000 * 60)) % 60; <br>
var myS = Math.floor(nMS / 1000) % 60; <br>
var myMS = Math.floor(nMS / 100) % 10; <br>
if (myD >= 0) { <br>
var str = myD + "天" + myH + "小时" + myM + "分" + myS + "." + myMS + "秒"; <br>
} else { <br>
var str = "已结束！"; <br>
} <br>
obj.html(str); <br>
}); <br>
}, <br>
100); <br>
});查看该特效演示及免费下载，请访问http://www.sucaihuo.com/js/36.html
AD：真正免费，域名+虚机+企业邮箱=0元