基于jQuery倒计时插件实现团购秒杀效果

2024-03-18 18:28:03 389

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果，感兴趣的朋友一起学习吧！

1.1帮助文档关键字

倒计时秒杀timer

1.2.使用场景

这样的倒计时在购物网站中会经常使用到，比如秒杀，限时抢购，确认收货倒计时。

这个功能并不难实现，就是利用js的定时执行，搜了一下网上的代码，五花八门，都是一个方法，没有做到封装，方便使用，所以写了一个插件，方便项目中使用。

1.4.使用说明

开始使用

1、引入oao.timer.js

2、要显示倒计时时间的div

<divid="timer1"end-date="2016-1-1"></div>
<divid="timer2"end-date="2015/10/112:5:2"></div>Code:

3、初始化倒计时

$(function(){//文档加载完初始化倒计时
$("#timer1").oaoTime();
$("#timer2").oaoTime();
})

这样就可以使用了，很简单，这样便于项目开发中统一使用，统一修改。

1.5.上代码

//倒计时的插件
$.fn.extend({
oaoTime:function(){
this.each(function(){
vardateStr=$(this).attr("end-date");
varendDate=newDate(dateStr.replace(/-/g,"/"));//取得指定时间的总毫秒数
//now是在动态页面中取得服务器的时间，如果没有定义使用客户端时间
if(now==undefined){
now=newDate().getTime();
}
vartms=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);
vartimers=this.timers;
for(vari=0,j=timers.length;i<j;i++){
//计数减一
timers[i].tms-=1000;
//console.info(timers[i].tms);
//计算时分秒
vardays=Math.floor(timers[i].tms/(1000*60*60*24));
varhours=Math.floor(timers[i].tms/(1000*60*60))%24;
varminutes=Math.floor(timers[i].tms/(1000*60))%60;
varseconds=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;
varnewTimeText=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';
}
};
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="js/jquery-1.9.1.min.js"></script>
<scripttype="text/javascript"src="js/oao.timer.js"></script>
</head>
<body>
<ul>
<divid="stop">停止</div>
<divid="timer1"end-date="2016-1-1"></div>
<divid="timer2"end-date="2015/10/112:5:2"></div>
</ul>
</body>
</html>
<script>
$(function(){
$("#stop").click(function(){
$.oaoTime.stop();
});
$("#timer1").oaoTime();
$("#timer2").oaoTime();
})
</script>

以上内容是小编给大家介绍的基于jQuery倒计时插件实现团购秒杀效果，希望对大家有所帮助！

基于jQuery倒计时插件实现团购秒杀效果

热门推荐

随机推荐