javascript实现的简单计时器

计时器提供了一 个可以将代码片段异步延时执行的能力，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 来获取当前时间

以上所述就是本文的全部内容了，希望大家能够喜欢。