快捷導(dǎo)航

jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)

更新時(shí)間：2015年10月16日 12:16:59 投稿：lijiao

這篇文章主要介紹了jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)，倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛，如考試系統(tǒng)倒計(jì)時(shí)，團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等，感興趣的小伙伴們可以參考一下

倒計(jì)時(shí)一般是用來(lái)表示未來(lái)某一時(shí)刻距現(xiàn)在時(shí)刻還剩多少時(shí)間。倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛，如考試系統(tǒng)倒計(jì)時(shí)，團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等。今天，我們來(lái)使用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)功能。

本文以團(tuán)購(gòu)網(wǎng)站的倒計(jì)時(shí)為背景，我們知道，網(wǎng)站會(huì)給每個(gè)優(yōu)惠活動(dòng)（商品）定一個(gè)結(jié)束時(shí)間，也就是到期時(shí)間，但系統(tǒng)時(shí)間到達(dá)了結(jié)束時(shí)間，就意味著活動(dòng)結(jié)束。因此，我們?cè)贖TML中就要定義活動(dòng)的結(jié)束時(shí)間。
HTML

<ul class="prolist"> 
   <li><img src="images/p1.jpg" />簡(jiǎn)約時(shí)尚皮帶男士手表一款69元<p class="endtime showtime" 
   value="1354365003"></p></li> 
   <li><img src="images/p2.jpg" />高強(qiáng)度無(wú)毒樹脂材料榨汁器24元<p class="endtime showtime" 
   value="1350748800"></p></li> 
   <li><img src="images/p3.jpg" />茶香番茄/烏梅/楊梅0.48元<p class="endtime showtime" 
   value="1346487780"></p></li> 
   <li><img src="images/p4.jpg" />沙灘鞋男士戶外涼鞋69元<p class="endtime showtime" 
   value="1367380800"></p></li> 
</ul>

上述html代碼中，我們建立了一個(gè)列表，用于展示活動(dòng)名稱、圖片和倒計(jì)時(shí)，關(guān)鍵的是我們?cè)诿總€(gè)活動(dòng)定義了結(jié)束時(shí)間：.endtime屬性value的值，這個(gè)值是一串?dāng)?shù)字，表示自1970年1月1日以來(lái)的秒數(shù)，由后臺(tái)（PHP）生成。比如結(jié)束時(shí)間2013-05-01 12:00可以通過PHP轉(zhuǎn)換為1367380800秒，轉(zhuǎn)換后的秒數(shù)可以用來(lái)接下來(lái)的jQuery計(jì)算倒計(jì)時(shí)。
CSS
我們需要給頁(yè)面中的列表實(shí)際一個(gè)稍微好看點(diǎn)的外觀。

.endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000} 
.prolist{margin:10px auto} 
.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px; 
position:relative} 
.prolist li img{width:320px; height:198px;} 
.showtime{position:absolute; top:174px; height:24px; line-height:24px; 
background:#333; color:#fff; opacity:.6; display:none}

保存，預(yù)覽頁(yè)面效果，可以看到一個(gè)排列整齊的活動(dòng)列表。
jQuery

var serverTime = * 1000; //服務(wù)器時(shí)間，毫秒數(shù) 
$(function(){ 
  var dateTime = new Date(); 
  var difference = dateTime.getTime() - serverTime; //客戶端與服務(wù)器時(shí)間偏移量 
   
  setInterval(function(){ 
   $(".endtime").each(function(){ 
    var obj = $(this); 
    var endTime = new Date(parseInt(obj.attr('value')) * 1000); 
    var nowTime = new Date(); 
    var nMS=endTime.getTime() - nowTime.getTime() + difference; 
    var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); //天 
    var myH=Math.floor(nMS/(1000*60*60)) % 24; //小時(shí) 
    var myM=Math.floor(nMS/(1000*60)) % 60; //分鐘 
    var myS=Math.floor(nMS/1000) % 60; //秒 
    var myMS=Math.floor(nMS/100) % 10; //拆分秒 
    if(myD>= 0){ 
      var str = myD+"天"+myH+"小時(shí)"+myM+"分"+myS+"."+myMS+"秒"; 
    }else{ 
      var str = "已結(jié)束！";  
    } 
    obj.html(str); 
   }); 
  }, 100); //每個(gè)0.1秒執(zhí)行一次 
});

我們首先獲取服務(wù)器時(shí)間，我們要將倒計(jì)時(shí)與服務(wù)器時(shí)間保持一致，這樣一來(lái)每個(gè)客戶端看到的倒計(jì)時(shí)是一樣的，我們通過計(jì)算客戶端與服務(wù)器的時(shí)間偏移量，來(lái)避免了因客戶機(jī)器時(shí)間與服務(wù)器時(shí)間不一致而引起的倒計(jì)時(shí)不同步的麻煩。當(dāng)然這個(gè)服務(wù)器時(shí)間需要使用服務(wù)端語(yǔ)言來(lái)獲取，本文使用了PHP的time()函數(shù)獲取的秒數(shù)，記得要乘以1000轉(zhuǎn)換成毫秒數(shù)。
我們通過setInterval建立一個(gè)定時(shí)器，并且每個(gè)100毫秒執(zhí)行一次setInterval里面的代碼。
然后在定時(shí)器里，我們使用jQuery的each()方法，遍歷頁(yè)面中的列表，計(jì)算天、小時(shí)、分、秒。
因?yàn)閖avascript的getTime()函數(shù)獲取的是毫秒數(shù)，所以計(jì)算過程中都要/1000，
我們并不想在一個(gè)頁(yè)面將列表中所有的倒計(jì)時(shí)都顯示出來(lái)，而需要用戶將鼠標(biāo)滑向列表中的圖片才顯示對(duì)應(yīng)的倒計(jì)時(shí)，因此我們還需要加入以下輔助代碼：

$(function(){ 
  $(".prolist li img").each(function(){ 
    var img = $(this); 
    img.hover(function(){ 
      img.next().show(); 
    },function(){ 
      img.next().hide(); 
    }); 
  }); 
});

最終效果圖：