欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-04-09 21:42:02
本文转载自 在实际运用中，经常会使用到倒计时的效果。以下代码利用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>

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

上一篇： 详解vue项目首页加载速度优化

下一篇： 原生js中ajax访问的实例详解

推荐阅读