計時器提供了一 個可以將代碼片段異步延時執行的能力，javascript生來是單線程的(在一定時間范圍內僅一部分js代碼能運行)，計時器為我們提供了一種避開這種 限制的方法，從而開辟了另一條執行代碼的蹊徑。

最近寫了很多微信端的互動小游戲，比如下雪花 限時點擊 贏取獎品，限時拼圖，限時答題等，都是些限時‘游戲'(其實算不上游戲，頂多算是具有一點娛樂性的小互動而已)

上面出現了4個限時，對，沒錯，這里記錄的就是最近寫的 ‘計時器' ...

恩 ， 計時器 就一個setInterval 或 setTimeout 即可實現 ，代碼不會超過十行!

但是不防抱著沒事找事的心態，來寫個能復用的計時器

1.能倒計時 也能順計時

2.復位、暫停、停止，啟動功能

1. //計時器 
2. window.timer = (function(){ 
3. function mod(opt){ 
4. //可配置參數 都帶有默認值 
5. //必選參數 
6. this.ele = typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素 
7. //可選參數 
8. this.startT = opt.startT||0;//時間基數 
9. this.endT = opt.endT=='undefined'?24*60*60:opt.endT;//結束時間 默認為一天 
10. this.setStr = opt.setStr||null;//字符串拼接 
11. this.countdown = opt.countdown||false;//倒計時 
12. this.step = opt.step||1000; 
13. //不可配置參數 
14. this.timeV = this.startT;//當前時間 
15. this.startB = false;//是否啟動了計時 
16. this.pauseB = false;//是否暫停 
17. this.init(); 
18. } 
19. mod.prototype = { 
20. constructor : 'timer', 
21. init : function(){ 
22. this.ele.innerHTML = this.setStr(this.timeV); 
23. }, 
24. start : function(){ 
25. if(this.pauseB==true||this.startB == true){ 
26. this.pauseB = false; 
27. return; 
28. } 
29. if(this.countdown==false&&this.endT<=this.cardinalNum){ 
30. return false; 
31. }else if(this.countdown==true&&this.endT>=this.startT){ 
32. return false; 
33. } 
34. this.startB = true; 
35. var v = this.startT, 
36. this_ = this, 
37. anim = null; 
38. anim = setInterval(function(){ 
39. if(this_.startB==false||v==this_.endT){clearInterval(anim);return false} 
40. if(this_.pauseB==true)return; 
41. this_.timeV = this_.countdown?--v:++v; 
42. this_.ele.innerHTML = this_.setStr(this_.timeV); 
43. },this_.step); 
44. }, 
45. reset : function(){ 
46. this.startB = false; 
47. this.timeV = this.startT; 
48. this.ele.innerHTML = this.setStr(this.timeV); 
49. }, 
50. pause : function(){ 
51. if(this.startB == true)this.pauseB = true; 
52. }, 
53. stop : function(){ 
54. this.startB = false; 
55. } 
56. } 
57. return mod; 
58. })();  

調用方式：

1. var timerO_1 = new timer({ 
2. ele : 'BOX1', 
3. startT : 0, 
4. endT : 15, 
5. setStr : function(num){ 
6. return num+'s'; 
7. } 
8. }); 
9. var timerO_2 = new timer({ 
10. ele : 'BOX2', 
11. startT : 30, 
12. endT : 0, 
13. countdown : true, 
14. step : 500, 
15. setStr : function(num){ 
16. return num+'s'; 
17. } 
18. }); 

這里傳入的方法 setStr是計數器計算的當前時間寫入ele前的字符串處理

countdown是否為倒計時 默認為順計時

可以通過 timerO.timeV 來獲取當前時間

以上所述就是本文的全部內容了，希望大家能夠喜歡。