您好,欢迎访问一九零五行业门户网

使用jquery实现倒计时小功能

这篇文章主要为大家详细介绍了jquery实现倒计时小应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
 本文实例为大家分享了jquery倒计时效果的具体代码,供大家参考,具体内容如下
html
<p id="shop_rec"> <ul class="cf"> <li> <img src="image/goods.jpg" alt="小米 note 顶配版" /> <p> <h5>小米 note 顶配版</h5> <p>全网通 香槟金 移动联通<br />双4g手机 双卡双待</p> <em>¥2998<i>起</i></em> <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span> </p> </li> <li> <img src="image/goods.jpg" alt="小米 note 顶配版" /> <p> <h5>小米 note 顶配版</h5> <p>全网通 香槟金 移动联通<br />双4g手机 双卡双待</p> <em>¥2998<i>起</i></em> <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span> </p> </li> </ul> </p>
jquery
$(function(){ var abj = $("#shop_rec"), timeobj = abj.find('.time'); var starttime = timeobj.data('starttime'); // 定时器函数 function actiondo(){ return setinterval(function(){ timeobj.each(function(index, el) { var t = $(this), surplustime = t.data('endtime') -starttime; if (surplustime <= 0) { t.html("活动已经开始"); } else{ var year = surplustime/(24*60*60*365), showyear = parseint(year), month = (year-showyear)*12, showmonth = parseint(month), day = (month-showmonth)*30, showday = parseint(day), hour = (day-showday)*24, showhour = parseint(hour), minute = (hour-showhour)*60, showminute = parseint(minute), seconds = (minute-showminute)*60, showseconds = parseint(seconds); t.html(""); if (showyear>0) { t.append("<span>"+showyear+"年</span>") }; if (showmonth>0) { t.append("<span>"+showmonth+"月</span>") }; if (showday>0) { t.append("<span>"+showday+"天</span>") }; if (showhour>=0) { t.append("<span>"+showhour+"小时</span>") }; if (showminute>=0) { t.append("<span>"+showminute+"分钟</span>") }; if (showseconds>=0) { t.append("<span>"+showseconds+"秒</span>") }; }; }); starttime++; },1000); // 设定执行或延时时间 }; // 执行它 actiondo(); });
总结
不是特别优秀,但是小的应用完全没有问题。
以上就是使用jquery实现倒计时小功能的详细内容。
其它类似信息

推荐信息