倒计时通常用来表示从未来某个时间到现在还有多少时间。倒计时在WEB上应用广泛，如考试系统倒计时、团购网站优惠活动倒计时等等。今天，我们将使用jQuery实现一个简单的倒计时功能。

基于团购网站的倒计时，我们知道网站会为每个优惠活动(商品)设置一个结束时间，即到期时间，但当系统时间到达结束时间时，则意味着活动结束。因此，我们需要在HTML中定义活动的结束时间。超文本标记语言

ul class=' prolist ' liimg src=' http 3360 images/p 1 . jpg '/一款简约时尚的男表，搭配69元的p class=' end time show time ' value=' 1354365003 '/p/Li liimg src=' http 3360 images/p 2 . jpg '/24元的高强度无毒树脂榨汁机p class=' end time show time ' value=' 1350748800 '/p/Li liimg 男士户外凉鞋凉鞋69元p class=' end time show time ' value=' 1367380800 '/p/Li/ul在上面的html代码中，我们创建了一个用于显示活动名称、图片和倒计时的列表。 关键是我们定义了每个事件的结束时间：的值。endtime属性值，它是一个数字字符串，表示自1970年1月1日起。比如2013-05-01的结束时间12:00，可以通过PHP转换为1367380800秒，转换后的秒可以用于下一次jQuery倒计时。CSS需要给页面上的列表一个稍微好一点的外观。end time { font-size :20 px；font-family: '微软雅黑'；color:#000}。prolist { margin:10px auto }。prolist li { float:left宽度width:320px高度：240 px；margin:10pxfont-size :14 px；位置：relative}。prolist li img { width:320px高度：198 px；} .show time { position : absolute；top:174pxheight:24px线高：24 px；背景技术： # 333；color: # fffopacity:6Display:none }，预览页面效果，可以看到排列整齐的活动列表。jQuery

var serverTime=* 1000//服务器时间，毫秒$(function(){ vardatetime=new date()；var difference=datetime . gettime()-server time；//客户端和服务器之间的时间偏移量setinterval (function () {$(')。end time’)。每个(function(){ varobj=$(this)；var endTime=new Date(parsent(obj . attr(' value '))* 1000)；var nowTime=新日期()；var nMS=end time . gettime()-nowtime . gettime()差异；var myD=math . floor(nMS/(1000 * 60 * 60 * 24))；//day var myh=数学。下限(NMS/(1000 * 60 * 60))% 24；//小时var mym=数学。下限(NMS/(1000 * 60))% 60；//min var MyS=Math . floor(NMs/1000)60%；//秒var myMS=math . floor(NMs/100)% 10；//如果(MyD=0){ var str=MyD ' days ' MyH ' hours ' MyM ' minutes ' MyS . 'myMS '秒'；}else{ var str=' over！'；} obj . html(str)；});}, 100);//每0.1秒一次})；首先我们得到服务器时间，我们需要让倒计时和服务器时间保持一致，这样每个客户端都能看到同样的倒计时。通过计算客户端和服务器之间的时间偏移，可以避免客户端机器时间和服务器时间不一致导致倒计时不同步的麻烦。当然，服务器时间需要通过使用服务器语言来获取。本文使用了PHP的time()函数得到的秒数。请记住将其乘以1000，并将其转换为毫秒。我们通过setInterval设置一个定时器，每隔100ms在setInterval中执行一次代码。然后，在计时器中，我们使用jQuery的each()方法遍历页面上的列表，并计算天、小时、分钟和秒。因为javascript的getTime()函数获取的是毫秒数，所以在计算过程中必须是/1000。我们不想在一个页面上显示列表中所有的倒计时，但是我们需要用户将鼠标滑动到列表中的图片上来显示相应的倒计时。因此，我们还需要添加以下辅助代码：

$(function(){ $(')。prolist li img ')。每个(function(){ var img=$(this)；img.hover(function(){ img.next()。show()；}，function(){ img.next()。hide()；});});});最终效果图：

以上都是关于倒计时的，希望对大家的学习有所帮助。