javascript实现的简单计时器
最近写了很多微信端的互动小游戏，比如下雪花限时点击赢取奖品，限时拼图，限时答题等，都是些限时‘游戏'（其实算不上游戏，顶多算是具有一点娱乐性的小互动而已）
上面出现了4个限时，对，没错，这里记录的就是最近写的‘计时器'...
恩，计时器就一个setInterval或setTimeout即可实现，代码不会超过十行！
但是不防抱着没事找事的心态，来写个能复用的计时器
1.能倒计时也能顺计时
2.复位、暂停、停止，启动功能
//计时器
window.timer=(function(){
functionmod(opt){
//可配置参数都带有默认值
//必选参数
this.ele=typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素
//可选参数
this.startT=opt.startT||0;//时间基数
this.endT=opt.endT=='undefined'?24*60*60:opt.endT;//结束时间默认为一天
this.setStr=opt.setStr||null;//字符串拼接
this.countdown=opt.countdown||false;//倒计时
this.step=opt.step||1000;
//不可配置参数
this.timeV=this.startT;//当前时间
this.startB=false;//是否启动了计时
this.pauseB=false;//是否暂停
this.init();
}
mod.prototype={
constructor:'timer',
init:function(){
this.ele.innerHTML=this.setStr(this.timeV);
},
start:function(){
if(this.pauseB==true||this.startB==true){
this.pauseB=false;
return;
}
if(this.countdown==false&&this.endT<=this.cardinalNum){
returnfalse;
}elseif(this.countdown==true&&this.endT>=this.startT){
returnfalse;
}
this.startB=true;
varv=this.startT,
this_=this,
anim=null;
anim=setInterval(function(){
if(this_.startB==false||v==this_.endT){clearInterval(anim);returnfalse}
if(this_.pauseB==true)return;
this_.timeV=this_.countdown?--v:++v;
this_.ele.innerHTML=this_.setStr(this_.timeV);
},this_.step);
},
reset:function(){
this.startB=false;
this.timeV=this.startT;
this.ele.innerHTML=this.setStr(this.timeV);
},
pause:function(){
if(this.startB==true)this.pauseB=true;
},
stop:function(){
this.startB=false;
}
}
returnmod;
})();
调用方式：
vartimerO_1=newtimer({
ele:'BOX1',
startT:0,
endT:15,
setStr:function(num){
returnnum+'s';
}
});
vartimerO_2=newtimer({
ele:'BOX2',
startT:30,
endT:0,
countdown:true,
step:500,
setStr:function(num){
returnnum+'s';
}
});
这里传入的方法setStr是计数器计算的当前时间写入ele前的字符串处理
countdown是否为倒计时默认为顺计时
可以通过timerO.timeV来获取当前时间
以上所述就是本文的全部内容了，希望大家能够喜欢。