倒計時一般是用來表示未來某一時刻距現(xiàn)在時刻還剩多少時間。倒計時在WEB上應用非常廣泛，如考試系統(tǒng)倒計時，團購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天，我們來使用jQuery實現(xiàn)一個簡單的倒計時功能。
本文以團購網(wǎng)站的倒計時為背景，我們知道，網(wǎng)站會給每個優(yōu)惠活動（商品）定一個結束時間，也就是到期時間，但系統(tǒng)時間到達了結束時間，就意味著活動結束。因此，我們在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的值，這個值是一串數(shù)字，表示自1970年1月1日以來的秒數(shù)，由后臺（PHP）生成。比如結束時間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}
?
保存，預覽頁面效果，可以看到一個排列整齊的活動列表。
?
jQuery
var serverTime = * 1000; //服務器時間，毫秒數(shù)
$(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秒執(zhí)行一次
});
?
我們首先獲取服務器時間，我們要將倒計時與服務器時間保持一致，這樣一來每個客戶端看到的倒計時是一樣的，我們通過計算客戶端與 服務器的時間偏移 量，來避免了因客戶機器時間與服務器時間不一致而引起的倒計時不同步的麻煩。當然這個服務器時間需要使用服務端語言來獲取，本文使用了PHP的 time()函數(shù)獲取的秒數(shù)，記得要乘以1000轉(zhuǎn)換成毫秒數(shù)。
?
我們通過setInterval建立一個定時器，并且每個100毫秒執(zhí)行一次setInterval里面的代碼。
然后在定時器里，我們使用jQuery的each()方法，遍歷頁面中的列表，計算天、小時、分、秒。
因為javascript的getTime()函數(shù)獲取的是毫秒數(shù)，所以計算過程中都要/1000，
我們并不想在一個頁面將列表中所有的倒計時都顯示出來，而需要用戶將鼠標滑向列表中的圖片才顯示對應的倒計時，因此我們還需要加入以下輔助代碼：
$(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+"秒" : "已結束！";
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(); //當前時間距1970年1月1日之間的毫秒數(shù)
$(".settime").each(function(i){
var endDate =this.getAttribute("endTime"); //結束時間字符串
//轉(zhuǎn)換為時間日期類型
var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
var endTime = endDate1.getTime(); //結束時間毫秒數(shù)
var lag = (endTime - time) / 1000; //當前時間和結束時間之間的秒數(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)結束啦！");
});
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>
?
?
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
