jQuery实现倒计时功能 jQuery实现计时器功能
程序员文章站
2022-09-08 13:26:15
本文转载自
在实际运用中,经常会使用到倒计时的效果。以下代码利用jquery实现了一个倒计时计时器。
...
本文转载自
在实际运用中,经常会使用到倒计时的效果。以下代码利用jquery实现了一个倒计时计时器。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery倒计时实现</title> <style type="text/css"> .shop_list ul li{ display: inline-block; list-style: none; width: 300px; } </style> </head> <body> <div class="shop_list" id="shop_list"> <ul> <li> <img src="img/index/zixun1.jpg"/> <div class="listitem"> <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="img/index/zixun1.jpg"/> <div class="listitem"> <h5>小米手机 note 顶配版</h5> <p>全网通 香槟金 移动联通<br/>双4g手机 双卡双待</p> <em>¥2998<i>起</i></em> <span class="time" data-starttime='1445982375' data-endtime='1446350400'></span> </div> </li> </ul> </div> </body> <script type="text/javascript" src="js/lib/jquery-1.10.1.min.js" ></script> <script type="text/javascript"> $(function(){ //找到商品列表以及时间显示span var abj = $("#shop_list"), timeobj = abj.find('.time'); //获取开始时间 var starttime = timeobj.data('starttime'); // 定时器函数 function actiondo(){ return setinterval(function(){ timeobj.each(function(index, el) { //surplustime为活动剩余开始时间 var t = $(this), surplustime = t.data('endtime') -starttime; //若活动剩余开始时间小于0,则说明活动已开始 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(""); //设置输出到html的格式并输出到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(); }); </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: How 优根