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

前端之家收集整理的这篇文章主要介绍了基于jQuery倒计时插件实现团购秒杀效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在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="/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

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

猜你在找的jQuery相关文章