倒計時一般是用來表示未來某一時刻距現(xiàn)在時刻還剩多少時間。倒計時在WEB上應(yīng)用非常廣泛，如考試系統(tǒng)倒計時，團購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天，我們來使用jQuery實現(xiàn)一個簡單的倒計時功能。
本文以團購網(wǎng)站的倒計時為背景，我們知道，網(wǎng)站會給每個優(yōu)惠活動（商品）定一個結(jié)束時間，也就是到期時間，但系統(tǒng)時間到達(dá)了結(jié)束時間，就意味著活動結(jié)束。因此，我們在HTML中就要定義活動的結(jié)束時間。
?
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代碼中，我們建立了一個列表，用于展示活動名稱、圖片和倒計時，關(guān)鍵的是我們在每個活動定義了結(jié)束 時間：.endtime屬性 value的值，這個值是一串?dāng)?shù)字，表示自1970年1月1日以來的秒數(shù)，由后臺（PHP）生成。比如結(jié)束時間2013-05-01 12:00可以通過PHP轉(zhuǎn)換為1367380800秒，轉(zhuǎn)換后的秒數(shù)可以用來接下來的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}
?
保存，預(yù)覽頁面效果，可以看到一個排列整齊的活動列表。
?
jQuery
var serverTime = * 1000; //服務(wù)器時間，毫秒數(shù)
$(function(){
var dateTime = new Date();
var difference = dateTime.getTime() - serverTime; //客戶端與服務(wù)器時間偏移量
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 = "已結(jié)束！";
}
obj.html(str);
});
}, 100); //每個0.1秒執(zhí)行一次
});
?
我們首先獲取服務(wù)器時間，我們要將倒計時與服務(wù)器時間保持一致，這樣一來每個客戶端看到的倒計時是一樣的，我們通過計算客戶端與 服務(wù)器的時間偏移 量，來避免了因客戶機器時間與服務(wù)器時間不一致而引起的倒計時不同步的麻煩。當(dāng)然這個服務(wù)器時間需要使用服務(wù)端語言來獲取，本文使用了PHP的 time()函數(shù)獲取的秒數(shù)，記得要乘以1000轉(zhuǎn)換成毫秒數(shù)。
?
我們通過setInterval建立一個定時器，并且每個100毫秒執(zhí)行一次setInterval里面的代碼。
然后在定時器里，我們使用jQuery的each()方法，遍歷頁面中的列表，計算天、小時、分、秒。
因為javascript的getTime()函數(shù)獲取的是毫秒數(shù)，所以計算過程中都要/1000，
我們并不想在一個頁面將列表中所有的倒計時都顯示出來，而需要用戶將鼠標(biāo)滑向列表中的圖片才顯示對應(yīng)的倒計時，因此我們還需要加入以下輔助代碼：
$(function(){
$(".prolist li img").each(function(){
var img = $(this);
img.hover(function(){
img.next().show();
},function(){
img.next().hide();
});
});
});
?
來源于 helloweba.com http://www.helloweba.com/view-blog-182.html
下載附件： countdown
?
全代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery倒計時</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var serverTime = <?php echo time();?> * 1000;
$(function()
{
var str = '';
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;
str = myD>= 0 ? myD+"天"+myH+"小時"+myM+"分"+myS+"."+myMS+"秒" : "已結(jié)束！";
obj.html(str);
});
}, 100);
});
</script>
</head>
<body>
<p>距離2015年05月18日還有</p>
<div class="endtime" value="<?php echo strtotime('2015-05-18 00:00:00') ?>"></div>
<p>距離2015年05月19日還有</p>
<div class="endtime" value="<?php echo strtotime('2015-05-19 12:36:00') ?>"></div>
</body>
</html>
?
無毫秒版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>倒計時</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){ updateEndTime(); });
//倒計時函數(shù)
function updateEndTime()
{
var date = new Date();
var time = date.getTime(); //當(dāng)前時間距1970年1月1日之間的毫秒數(shù)
$(".settime").each(function(i){
var endDate =this.getAttribute("endTime"); //結(jié)束時間字符串
//轉(zhuǎn)換為時間日期類型
var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
var endTime = endDate1.getTime(); //結(jié)束時間毫秒數(shù)
var lag = (endTime - time) / 1000; //當(dāng)前時間和結(jié)束時間之間的秒數(shù)
if(lag > 0)
{
var second = Math.floor(lag % 60);
var minite = Math.floor((lag / 60) % 60);
var hour = Math.floor((lag / 3600) % 24);
var day = Math.floor((lag / 3600) / 24);
$(this).html(day+"天"+hour+"小時"+minite+"分"+second+"秒");
}
else $(this).html("團購已經(jīng)結(jié)束啦！");
});
setTimeout("updateEndTime()",1000);
}
</script>
</head>
<body>
<div class="settime" endTime="2015-5-12 12:1:1"></div>
<div class="settime" endTime="2015-6-13 12:8:1"></div>
<div class="settime" endTime="2013-5-12 12:1:1"></div>
</body>
</html>
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
