jQuery倒计时效果，代码很简洁_Jquery教程

导读：本文以团购网站的倒计时为例，给三件商品赋予了结束时间及2016年春节结束时间。我们为三件商品分别定义了结束时间戳，即class为.endtime属...

本文以团购网站的倒计时为例，给三件商品赋予了结束时间及2016年春节结束时间。

我们为三件商品分别定义了结束时间戳，即class为“.endtime”属性value值。

<ul class="prolist clearfix">

 <li>

 <img src="http://gi1.mlist.alicdn.com/bao/uploaded/i1/TB1ksBNHXXXXXcAXpXXXXXXXXXX_!!0-item_pic.jpg_220x330.jpg" />

 美茵儿 2015韩版新款印花夏装

 

 </li>

 <li>

 <img src="http://gi3.mlist.alicdn.com/bao/uploaded/i3/TB1eYiDHXXXXXaYaXXXXXXXXXXX_!!0-item_pic.jpg_220x330.jpg" />

 阿米路2015夏装新款两件套

 </li>

 <li>

 <img src="http://gi1.mlist.alicdn.com/bao/uploaded/i1/TB1t8f3HXXXXXbFaXXXXXXXXXXX_!!0-item_pic.jpg_220x330.jpg" />

 映帘2015春装女装新款韩版

 

 </li>

</ul>

jQuery

每个商品定时100毫秒执行一次setInterval里面的代码。接着each()方法遍历计算每个商品的倒计时，单位为天、小时、分、秒。

var time_current = (new Date()).valueOf(); //获取当前时间

$(function() {

 var dateTime = new Date();

 var difference = dateTime.getTime() - time_current;



 setInterval(function() {

 $(".endtime").each(function() {

 var obj = $(this);

 var endTime = new Date(parseInt(obj.attr('value')) * 1000);

 var nowTime = new Date();

 var nMS = endTime.getTime() - nowTime.getTime() + difference;

 var myD = Math.floor(nMS / (1000 * 60 * 60 * 24));

 var myH = Math.floor(nMS / (1000 * 60 * 60)) % 24;

 var myM = Math.floor(nMS / (1000 * 60)) % 60;

 var myS = Math.floor(nMS / 1000) % 60;

 var myMS = Math.floor(nMS / 100) % 10;

 if (myD >= 0) {

 var str = myD + "天" + myH + "小时" + myM + "分" + myS + "." + myMS + "秒";

 } else {

 var str = "已结束！";

 }

 obj.html(str);

 });

 },

 100);

});

全站搜索

jQuery倒计时效果，代码很简洁

最新推荐

本周排行