javascript實(shí)現(xiàn)的簡單計(jì)時(shí)器
最近寫了很多微信端的互動小游戲,比如下雪花 限時(shí)點(diǎn)擊 贏取獎(jiǎng)品,限時(shí)拼圖,限時(shí)答題等,都是些限時(shí)‘游戲'(其實(shí)算不上游戲,頂多算是具有一點(diǎn)娛樂性的小互動而已)
上面出現(xiàn)了4個(gè)限時(shí),對,沒錯(cuò),這里記錄的就是最近寫的 ‘計(jì)時(shí)器' ...
恩 , 計(jì)時(shí)器 就一個(gè)setInterval 或 setTimeout 即可實(shí)現(xiàn) ,代碼不會超過十行!
但是不防抱著沒事找事的心態(tài),來寫個(gè)能復(fù)用的計(jì)時(shí)器
1.能倒計(jì)時(shí) 也能順計(jì)時(shí)
2.復(fù)位、暫停、停止,啟動功能
//計(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;//是否啟動了計(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)容了,希望大家能夠喜歡。
- JS 頁面計(jì)時(shí)器示例代碼
- Node.js中使用計(jì)時(shí)器定時(shí)執(zhí)行函數(shù)詳解
- javascript實(shí)現(xiàn)計(jì)時(shí)器的簡單方法
- JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
- javascript計(jì)時(shí)器事件使用詳解
- VB倒計(jì)時(shí)器和JS當(dāng)前時(shí)間
- javascript設(shè)計(jì)簡單的秒表計(jì)時(shí)器
- 原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能
- javascript計(jì)時(shí)器詳解
- js編寫簡單的計(jì)時(shí)器功能

