基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在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倒计时插件实现团购秒杀效果,希望对大家有所帮助!