倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在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;
