jQuery倒计时代码(图文)
本文导语: 倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。 倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。 使用jQuery实现一个简单的倒计时功能。 本文以团购网站的倒计时为背景...
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。
倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。
使用jQuery实现一个简单的倒计时功能。
本文以团购网站的倒计时为背景，网站会给每个优惠活动（商品）定一个结束时间，也就是到期时间，但系统时间到达了结束时间，就意味着活动结束。
因此，在HTML中就要定义活动的结束时间。
简约时尚皮带男士手表一款69元
高强度无毒树脂材料榨汁器24元
茶香番茄/乌梅/杨梅0.48元
沙滩鞋男士户外凉鞋69元
上述html代码中，建立了一个列表，用于展示活动名称、图片和倒计时，关键的是我们在每个活动定义了结束时间：.endtime属性value的值，这个值是一串数字，表示自1970年1月1日以来的秒数，由后台（PHP）生成。比如结束时间2013-05-01 12:00可以通过PHP转换为1367380800秒，转换后的秒数可以用来接下来的jQuery计算倒计时。
给页面中的列表实际一个稍微好看点的外观。
.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}
保存，预览页面效果，可以看到一个排列整齐的活动列表。
$(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，
并不想在一个页面将列表中所有的倒计时都显示出来，而需要用户将鼠标滑向列表中的图片才显示对应的倒计时，因此还需要加入以下辅助代码：
$(".prolist li img").each(function(){
var img = $(this);
img.hover(function(){
img.next().show();
},function(){
img.next().hide();
});
});
});
最终效果图：
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。