jquery实现倒计时小应用
程序员文章站
2022-09-08 13:49:33
本文实例为大家分享了jquery倒计时效果的具体代码,供大家参考,具体内容如下
html
...
本文实例为大家分享了jquery倒计时效果的具体代码,供大家参考,具体内容如下
html
<div id="shop_rec"> <ul class="cf"> <li> <img src="image/goods.jpg" alt="小米 note 顶配版" /> <div> <h5>小米 note 顶配版</h5> <p>全网通 香槟金 移动联通<br />双4g手机 双卡双待</p> <em>¥2998<i>起</i></em> <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span> </div> </li> <li> <img src="image/goods.jpg" alt="小米 note 顶配版" /> <div> <h5>小米 note 顶配版</h5> <p>全网通 香槟金 移动联通<br />双4g手机 双卡双待</p> <em>¥2998<i>起</i></em> <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span> </div> </li> </ul> </div>
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(); });
总结
不是特别优秀,但是小的应用完全没有问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: AngularJS日程表案例详解