快捷導(dǎo)航

jQuery實現(xiàn)倒計時功能 jQuery實現(xiàn)計時器功能

更新時間：2017年09月19日 14:36:36 作者：henouren

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)倒計時功能，jQuery實現(xiàn)計時器功能的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在實際運用中，經(jīng)常會使用到倒計時的效果。以下代碼利用jQuery實現(xiàn)了一個倒計時計時器。

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>jquery倒計時實現(xiàn)</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>全網(wǎng)通 香檳金 移動聯(lián)通<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>全網(wǎng)通 香檳金 移動聯(lián)通<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'); 
  
  // 定時器函數(shù) 
  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("活動已經(jīng)開始"); 
   } else{ 
   //否則，活動未開始，將剩余的時間轉(zhuǎn)換成年，月，日，時，分，秒的形式 
    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(""); 
    //設(shè)置輸出到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); // 設(shè)定執(zhí)行或延時時間 
  }; 
  // 執(zhí)行它 
  actionDo(); 
 }); 
 </script> 
</html>

更多關(guān)于倒計時的文章請查看專題：《倒計時功能》

更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: