标签:
最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时‘游戏’(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已)
上面出现了4个限时,对,没错,这里记录的就是最近写的 ‘计时器’ ...
恩 , 计时器 就一个setInterval 或 setTimeout 即可实现 ,代码不会超过十行!
但是不防抱着没事找事的心态,来写个能复用的计时器
1.能倒计时 也能顺计时
2.复位、暂停、停止,启动功能
//计时器 window.timer = timer || (function(){ function mod(opt){ //可配置参数 都带有默认值 //必选参数 this.ele = typeof(opt.ele)==‘string‘?document.getElementById(opt.ele):opt.ele;//元素 //可选参数 this.cardinalNum = opt.cardinalNum||0;//时间基数 this.endT = opt.endT==‘undefined‘?24*60*60:opt.endT;//结束时间 默认为一天 this.setStr = opt.setStr||null;//字符串拼接 this.countdown = opt.countdown||false;//倒计时 //不可配置参数 this.timeV = this.cardinalNum;//当前时间 this.startB = false;//是否启动了计时 this.pauseB = false;//是否暂停 } mod.prototype = { constructor : ‘timer‘, start : function(){ if(this.pauseB==true){ this.pauseB = false; return; } if(this.countdown==false&&this.endT<=this.cardinalNum){ return false; }else if(this.countdown==true&&this.endT>=this.cardinalNum){ return false; } this.startB = true; var v = this.cardinalNum, 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); },1000) }, reset : function(){ this.timeV = this.cardinalNum; }, pause : function(){ if(this.startB == true)this.pauseB = true; }, stop : function(){ this.startB = false; } } return mod; })();
调用方式:
timerO = new timer({ ele : ‘timeBox‘, cardinalNum : this_.time/1000, countdown : true, endT : 0, setStr : function(num){ return num+‘‘‘; } });
这里传入的方法 setStr是计数器计算的当前时间写入ele前的字符串处理
countdown是否为倒计时 默认为顺计时
cardinalNum为时间基数
可以通过 timerO.timeV 来获取当前时间
代码多了一堆,哈哈
标签:
原文地址:http://www.cnblogs.com/chocho/p/4655987.html