jQuery实现倒计时功能 jQuery实现计时器功能

2019-11-19 15:23:06

字体：大中小

来源：转载

供稿：网友

在实际运用中，经常会使用到倒计时的效果。以下代码利用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解ES6之async+await 同步/异步方案

下一篇：jquery实现倒计时小应用