jQuery實現商品活動倒數_jquery

倒數計時一般是用來表示未來某一時刻距現在時刻還剩多少時間。倒數計時在WEB上應用非常廣泛，如考試系統倒數計時，團購網站中的優惠活動倒數等等。今天，我們來使用jQuery實作一個簡單的倒數計時功能。

本文以團購網站的倒數計時為背景，我們知道，網站會給每個優惠活動（商品）定一個結束時間，也就是到期時間，但係統時間到達了結束時間，就意味著活動結束。因此，我們在HTML中就要定義活動的結束時間。
HTML

<ul class="prolist"> 
   <li><img src="images/p1.jpg" />简约时尚皮带男士手表一款69元<p class="endtime showtime" 
   value="1354365003"></p></li> 
   <li><img src="images/p2.jpg" />高强度无毒树脂材料榨汁器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程式碼中，我們建立了一個列表，用於展示活動名稱、圖片和倒數計時，關鍵的是我們在每個活動定義了結束時間：.endtime屬性value的值，這個值是一串數字，表示自1970年1月1日以來的秒數，由後台（PHP）產生。例如結束時間2013-05-01 12:00可以透過PHP轉換為1367380800秒，轉換後的秒數可以用來接下來的jQuery計算倒數。
CSS
我們需要給頁面中的列表實際一個稍微好一點的外觀。

.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} 

儲存，預覽頁面效果，可以看到一個排列整齊的活動清單。
jQuery

var serverTime = * 1000; //服务器时间，毫秒数 
$(function(){ 
  var dateTime = new Date(); 
  var difference = dateTime.getTime() - serverTime; //客户端与服务器时间偏移量 
   
  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; //小时 
    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+"小时"+myM+"分"+myS+"."+myMS+"秒"; 
    }else{ 
      var str = "已结束！";  
    } 
    obj.html(str); 
   }); 
  }, 100); //每个0.1秒执行一次 
}); 

我們先取得伺服器時間，我們要將倒數計時與伺服器時間保持一致，這樣一來每個客戶端看到的倒數計時是一樣的，我們透過計算客戶端與伺服器的時間偏移量，來避免了因客戶機器時間與伺服器時間不一致而造成的倒數計時不同步的麻煩。當然這個伺服器時間需要使用服務端語言來獲取，本文使用了PHP的time()函數所獲得的秒數，記得要乘以1000轉換成毫秒數。
我們透過setInterval建立一個定時器，並且每個100毫秒執行一次setInterval裡面的程式碼。
然後在計時器裡，我們使用jQuery的each()方法，遍歷頁面中的列表，計算天、小時、分、秒。
因為javascript的getTime()函數取得的是毫秒數，所以計算過程中都要/1000，
我們並不想在一個頁面將清單中所有的倒數計時都顯示出來，而需要使用者將滑鼠滑向清單中的圖片才顯示對應的倒數計時，因此我們還需要加入以下輔助程式碼：

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

最終效果圖：

以上就是關於倒數計時的全部內容，希望對大家的學習有所幫助。