当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery实现倒计时功能 jQuery实现计时器功能

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文转载自

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网