倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果，感兴趣的朋友一起学习吧！
1.1 帮助文档关键字
倒计时 秒杀 timer
1.2. 使用场景
这样的倒计时在购物网站中会经常使用到，比如秒杀，限时抢购，确认收货倒计时。
这个功能并不难实现，就是利用js的定时执行，搜了一下网上的代码，五花八门，都是一个方法，没有做到封装，方便使用，所以写了一个插件，方便项目中使用。
1.4. 使用说明
开始使用
1、 引入oao.timer.js
2、 要显示倒计时时间的div
Code:
3、 初始化倒计时
这样就可以使用了，很简单，这样便于项目开发中统一使用，统一修改。
1.5. 上代码
插件
$.fn.extend({
oaoTime:function(){
this.each(function() {
var dateStr = $(this).attr("end-date");
var endDate = new Date(dateStr.replace(/-/g,"/"));//取得指定时间的总毫秒数
//now是在动态页面中取得服务器的时间，如果没有定义使用客户端时间
if(now==undefined){
now = new Date().getTime();
}
var tms = endDate - now;//得到时间差
if(tms<0){alert("时间过期了");return;}
$.oaoTime.timers.push({tms:tms,content:$(this)});
$.oaoTime.start();
});
}
});
//倒计时的插件
$.oaoTime={
//倒计时容器，所有需要倒计时的时间都需要注册到这个容器中，容器中放的是一个object，object描述了倒计时的结束时间，以及显示时间的jquery对象(例如div)
timers:[],//全局的一个倒计时状态，init表示初始化状态，start表示运行中状态，stop表示停止状态
status:'init',//计算时间并定时刷新时间的方法，本插件的核心代码
takeCount:function(){
//如果定时器没有启动不执行
if(this.status != 'start')return;
setTimeout("$.oaoTime.takeCount()",1000 );
var timers = this.timers;
for (var i = 0,j = timers.length; i < j; i++) {
//计数减一
timers[i].tms -= 1000;
//console.info(timers[i].tms);
//计算时分秒
var days = Math.floor(timers[i].tms / (1000 * 60 * 60 * 24));
var hours = Math.floor(timers[i].tms / (1000 * 60 * 60)) % 24;
var minutes = Math.floor(timers[i].tms / (1000 * 60)) % 60;
var seconds = Math.floor(timers[i].tms / 1000) % 60;
if (days < 0)days = 0;
if (hours < 0)hours = 0;
if (minutes < 0)minutes = 0;
if (seconds < 0) seconds = 0;
var newTimeText = days+"天"+hours+"小时"+minutes+"分"+seconds+"秒";
timers[i].content.text(newTimeText);
//console.info(newTimeText);
}
},//启动倒计时
start:function(){
if(this.status=='init'){
this.status = 'start';
this.takeCount();
}
},//停止倒计时
stop:function(){
this.status = 'stop';
}
};
无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档