基于jQuery的倒计时实现代码
2018-03-05 18:24
507 查看
本文以团购网站的倒计时为例,给三件商品赋予了结束时间及2016年春节结束时间。
HTML
我们为三件商品分别定义了结束时间戳,即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韩版新款印花夏装 <p class="endtime showtime" value="1451860800"></p> </li> <li> <img src="http://gi3.mlist.alicdn.com/bao/uploaded/i3/TB1eYiDHXXXXXaYaXXXXXXXXXXX_!!0-item_pic.jpg_220x330.jpg" /> 阿米路2015夏装新款两件套 <p class="endtime showtime" value="1452860800"></p></li> <li> <img src="http://gi1.mlist.alicdn.com/bao/uploaded/i1/TB1t8f3HXXXXXbFaXXXXXXXXXXX_!!0-item_pic.jpg_220x330.jpg" /> 映帘2015春装女装新款 韩版 <p class="endtime showtime" value="1453860800"></p> </li> </ul>每个商品定时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); });顺便看下<a href=‘http://www.sucaihuo.com/jquery/demo/36/' target='_blank'>倒计时</a>演示效果图吧。
相关文章推荐
- 基于jQuery的倒计时实现代码
- 基于jQuery实现美观且实用的倒计时实例代码
- 基于jQuery实现美观且实用的倒计时实例代码
- jquery实现手机发送验证码的倒计时代码
- 基于jQuery代码实现圆形菜单展开收缩效果
- JQuery实现倒计时按钮的实现代码
- 基于jQuery实现的向下滑动二级菜单效果代码
- 基于jquery用于查询操作的实现代码
- cnblogs TagCloud基于jquery的实现代码
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- jquery实现的判断倒计时是否结束代码
- 基于jQuery+Cookie实现的防止刷新的在线考试倒计时
- jQuery实现倒计时按钮功能代码分享
- jQuery实现倒计时按钮功能代码分享
- 基于jQuery实现仿51job城市选择功能实例代码
- 基于jQuery实现交互体验社会化分享代码附源码下载
- 基于jquery的时间段实现代码
- 基于jQuery的360图片展示实现代码
- 基于jquery实现的服务器验证控件的启用和禁用代码