js实现网页同时进行多个倒计时功能
本文实例为大家分享了js实现网页同时进行多个倒计时的具体代码,供大家参考,具体内容如下
创建一个时间类Timer.
每个商品的倒计时生成一个实例:vartime=newTimer();
/** *startime应该是毫秒数 */ varAlarm=function(startime,endtime,countFunc,endFunc){ this.time=Math.floor((endtime-startime)/1000);//时间 this.countFunc=countFunc;//计时函数 this.endFunc=endFunc;//结束函数 this.flag='t'+Date.parse(newDate());// }; Alarm.prototype.start=function(){ varself=this; self.flag=setInterval(function(){ if(self.time<0){ clearInterval(self.flag); self.endFunc(); console.log('计时结束'); }else{ varminute,hour,day,second; day=Math.floor(self.time/60/60/24)<10?'0'+Math.floor(self.time/60/60/24):Math.floor(self.time/60/60/24); hour=Math.floor(self.time/60/60%24)<10?'0'+Math.floor(self.time/60/60%24):Math.floor(self.time/60/60%24); minute=Math.floor(self.time/60%60)<10?'0'+Math.floor(self.time/60%60):Math.floor(self.time/60%60); second=Math.floor(self.time%60)<10?'0'+Math.floor(self.time%60):Math.floor(self.time%60); //倒计时执行函数 self.countFunc(second,minute,hour,day); self.time--; } },1000); }
如果调用:
vartime1=newAlarm(startime,endtime,countFunc,endFunc); time1.start(); vartime2=newAlarm(startime,endtime,countFunc,endFunc); time2.start(); ...
调用示例:
varcountTime=function(){ vareles=$('.count_time'), len=eles.length; for(;len>0;len--){ varele=eles.eq(len-1); (function(ele){ startTime=newDate(ele.attr('data-start-time')).getTime(), endTime=newDate(ele.attr('data-end-time')).getTime(), alarm=newAlarm(startTime,endTime,function(second,minute,hour,day){//计时钟 ele.text(hour+':'+minute+':'+second); },function(){//倒计时结束 ele.text('00:00:00'); window.location.reload(); }); alarm.start(); })(ele); } }; countTime();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。