最近寫了很多微信端的互動(dòng)小游戲,比如下雪花 限時(shí)點(diǎn)擊 贏取獎(jiǎng)品,限時(shí)拼圖,限時(shí)答題等,都是些限時(shí)‘游戲'(其實(shí)算不上游戲,頂多算是具有一點(diǎn)娛樂性的小互動(dòng)而已)
上面出現(xiàn)了4個(gè)限時(shí),對(duì),沒錯(cuò),這里記錄的就是最近寫的 ‘計(jì)時(shí)器' ...
恩 , 計(jì)時(shí)器 就一個(gè)setInterval 或 setTimeout 即可實(shí)現(xiàn) ,代碼不會(huì)超過十行!
但是不防抱著沒事找事的心態(tài),來寫個(gè)能復(fù)用的計(jì)時(shí)器
1.能倒計(jì)時(shí) 也能順計(jì)時(shí)
2.復(fù)位、暫停、停止,啟動(dòng)功能
//計(jì)時(shí)器window.timer = (function(){ function mod(opt){ //可配置參數(shù) 都帶有默認(rèn)值 //必選參數(shù) this.ele = typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素 //可選參數(shù) this.startT = opt.startT||0;//時(shí)間基數(shù) this.endT = opt.endT=='undefined'?24*60*60:opt.endT;//結(jié)束時(shí)間 默認(rèn)為一天 this.setStr = opt.setStr||null;//字符串拼接 this.countdown = opt.countdown||false;//倒計(jì)時(shí) this.step = opt.step||1000; //不可配置參數(shù) this.timeV = this.startT;//當(dāng)前時(shí)間 this.startB = false;//是否啟動(dòng)了計(jì)時(shí) 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){ return false; }else if(this.countdown==true&&this.endT>=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;})();
調(diào)用方式:
var timerO_1 = new timer({ ele : '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是計(jì)數(shù)器計(jì)算的當(dāng)前時(shí)間寫入ele前的字符串處理
countdown是否為倒計(jì)時(shí) 默認(rèn)為順計(jì)時(shí)
可以通過 timerO.timeV 來獲取當(dāng)前時(shí)間
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注