JavaScript实现的一个倒计时的类

这篇文章主要介绍了JavaScript实现的一个倒计时的类,本文直接给出demo代码,需要的朋友可以参考下

近期在做排列五的彩票项目，每一期都有购彩时段，即用户打开这个排列五的页面时，会从服务器传来一个remaintime(离本次彩期结束的剩余时间)，然后这个时间在客户端递减呈现给用户看，让用户获得本次彩期的剩余时间。

实现原理挺简单的，在此不在赘述，运行以下代码查看demo：

1. <!doctype html> 
2. <html> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
5. <title>index</title> 
6. <style type="text/css"> 
7. em{color:#f00;} 
8. </style> 
9. </head> 
10.  
11. <body> 
12. <div id="remaintime"></div> 
13. <script type="text/javascript"> 
14.  
15. var TheTime = function(){ 
16. this.init.apply(this,arguments); 
17. }; 
18.  
19. TheTime.prototype = { 
20. init: function(obj){ 
21. var that = this; 
22. obj = that.buildParam(obj); 
23. that.callback = obj.callback; 
24. var container = that.container = document.getElementById(obj.container); 
25. container.innerHTML = '<em></em>小时<em></em>分钟<em></em>秒'; 
26. var hourSpace = that.hourSpace = container.getElementsByTagName('em')[0]; 
27. var minuteSpace = that.minuteSpace = container.getElementsByTagName('em')[1]; 
28. var secondSpace = that.secondSpace = container.getElementsByTagName('em')[2]; 
29. if(obj.remaintime==0){ 
30. that.resetTime(); 
31. return; 
32. } 
33.  
34. that.hours = Math.floor(obj.remaintime/3600); 
35. that._remainder1 = obj.remaintime % 3600; 
36. that.minutes = Math.floor(that._remainder1/60); 
37. that.seconds = that._remainder1 % 60; 
38. var timer = that.timer = setInterval(function(){ 
39. that.renderTime.apply(that); 
40. },1000); 
41. }, 
42. buildParam: function(obj){ 
43. obj = { 
44. //container为dom节点的id 
45. container: obj.container || 'container', 
46. remaintime: Number(obj.remaintime) || 0, 
47. //倒计时完成后的回调 
48. callback: obj.callback || new Function 
49. }; 
50. return obj; 
51. }, 
52. resetTime: function(){ 
53. var that = this; 
54. that.container.innerHTML = "已经截止"; 
55. }, 
56. //刷新时间 
57. renderTime: function(){ 
58. //debugger; 
59. var that = this; 
60. if(that.seconds>0){ 
61. that.seconds--; 
62. }else{ 
63. that.seconds = 59; 
64. if(that.minutes>0){ 
65. that.minutes--; 
66. }else{ 
67. that.minutes = 59; 
68. if(that.hours>0){ 
69. that.hours--; 
70. } 
71. } 
72. } 
73.  
74. //时刻监听 
75. if(that.hours==0 && that.minutes==0 && that.seconds==0){ 
76. //执行回调 
77. that._callback(); 
78. } 
79. var bitHandle = that.bitHandle; 
80.  
81. var _hour = bitHandle(that.hours); 
82. var _minute = bitHandle(that.minutes); 
83. var _second = bitHandle(that.seconds); 
84. that.hourSpace.innerHTML = _hour; 
85. that.minuteSpace.innerHTML = _minute; 
86. that.secondSpace.innerHTML = _second; 
87. }, 
88. //对于位数的处理，确保返回两位数 
89. bitHandle: function(num){ 
90. var str = num.toString(); 
91. if(str.length<2){ 
92. str = 0 + str; 
93. } 
94. return str; 
95. }, 
96. _callback: function(){ 
97. var that = this; 
98. clearInterval(that.timer); 
99. that.callback(); 
100. } 
101.  
102. }; 
103.  
104. new TheTime({ 
105. //容器id 
106. container: 'remaintime', 
107. //服务器返回的剩余时间，单位为秒 
108. remaintime: 10000, 
109. //倒计时完成时的回调 
110. callback: function(){ 
111. document.getElementById('remaintime').innerHTML = '已截止'; 
112. } 
113. }); 
114. </script> 
115. </body> 
116. </html>