最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时‘游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已)
上面出现了4个限时,对,没错,这里记录的就是最近写的 ‘计时器' ...
恩 , 计时器 就一个setInterval 或 setTimeout 即可实现 ,代码不会超过十行!
但是不防抱着没事找事的心态,来写个能复用的计时器
1.能倒计时 也能顺计时
2.复位、暂停、停止,启动功能
=this.startT){
return false;
}
this.startB = true;
var v = this.startT,this_ = this,anim = null;
anim = setInterval(function(){
if(this_.startB==false||v==this_.endT){clearInterval(anim);return false}
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;
}
}
return mod;
})();
调用方式:
Box1',startT : 0,endT : 15,setStr : function(num){
return num+'s';
}
});
var timerO_2 = new timer({
ele : 'Box2',startT : 30,endT : 0,countdown : true,step : 500,setStr : function(num){
return num+'s';
}
});
这里传入的方法 setStr是计数器计算的当前时间写入ele前的字符串处理
countdown是否为倒计时 默认为顺计时
可以通过 timerO.timeV 来获取当前时间
以上所述就是本文的全部内容了,希望大家能够喜欢。
原文链接:https://www.f2er.com/js/53347.html