jQuery實現商品活動倒計時

2019-11-20 11:27:39

字體：大中小

來源：轉載

供稿：網友

倒計時一般是用來表示未來某一時刻距現在時刻還剩多少時間。倒計時在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();     });   }); });

最終效果圖：