一个js倒计时器(countdown timer)
项目中用到的一个倒计时器,直接上代码:
1 // JavaScript Document
2
3 /*
4 * author:argb
5 * contact:argb@live.cn
6 *
7 * Copyright © 2011,All rights reserved
8 */
9 /*
10 *e.g
11 *endDateParam:{year:2011,month:12,day:5}
12 *
13 */
14 function bind(fn, obj){
15
16 if (typeof obj !== 'object') {
17 throw 'obj is not an object';
18 }
19 var args = Array.prototype.slice.call(arguments, 2);//将arguments转换为数组,并去掉前两项
20 return function(){
21 /*
22 形成一个闭包,在此匿名函数中保持了对嵌套父函数中的参数fn、obj,局部变量args的引用,也体现了js的静态(词法)作用域规则,
23 然后利用apply方法可以改变this指向的特点,使fn执行时,其内部如果出现this则代表传入的参数obj.
24 */
25 fn.apply(obj, args);
26 };
27 }
28
29 function countdownTimer(endDateParam){
30 /*
31 初始化部分开始
32 */
33 if (this == window) {
34 return new countdownTimer(endDateParam);
35 }
36
37 if (!endDateParam && typeof endDateParam !== 'object') {
38
39 /*
40 new Date时,三个参数分别代表年月日,月份是从0开始算的,如一月份,第二个参数是0,所以2011,8,11代表2011-9-11;但是如果一字符串形式"2011,8,11"则不是从0开始,但是ie6、7、8不支持此写法,ie9不知道
41 */
42 this.endDate = new Date(2011, 8, 11);
43 }
44 else {
45 this.endDate = new Date(endDateParam.year, endDateParam.month - 1, endDateParam.day);
46 }
47
48 var days = document.getElementById('days'), hours = document.getElementById('hours'), minutes = document.getElementById('minutes'), seconds = document.getElementById('seconds');
49
50 /*
51 初始化部分结束
52 */
53 this.show = function(daysValue, hoursValue, minutesValue, secondsValue){
54 days.innerHTML = daysValue;
55 hours.innerHTML = hoursValue;
56 minutes.innerHTML = minutesValue;
57 seconds.innerHTML = secondsValue;
58 }
59
60 return this;
61 }
62
63 countdownTimer.prototype = {
64 update: function(){
65
66 var nowDate = new Date();
67
68 var endMilliseconds = this.endDate.getTime(), nowMilliseconds = nowDate.getTime();
69 var remainingMilliseconds = endMilliseconds - nowMilliseconds;//微妙数值差
70 //按照无条件舍去规则转化为各个单位(天、时、分、秒)下的数值分量,如0.2天得到结果为0天
71
72 var remainingDays = Math.floor(remainingMilliseconds / (1000 * 60 * 60 * 24)), remainingHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60)) - remainingDays * 24, remainingMinutes = Math.floor(remainingMilliseconds / (1000 * 60)) - remainingHours * 60 - remainingDays * 24 * 60, remainingSeconds = Math.floor(remainingMilliseconds / 1000) - remainingMinutes * 60 - remainingHours * 60 * 60 - remainingDays * 24 * 60 * 60;
73
74 this.show(remainingDays, remainingHours, remainingMinutes, remainingSeconds);
75 },
76 start: function(){
77 this.timer = setInterval(bind(this.update, this), 1000);
78 },
79 stop: function(){
80 clearInterval(this.timer);
81 }
82 }
83 countdownTimer({
84 year: 2012,
85 month: 1,
86 day: 1
87 }).start();
2
3 /*
4 * author:argb
5 * contact:argb@live.cn
6 *
7 * Copyright © 2011,All rights reserved
8 */
9 /*
10 *e.g
11 *endDateParam:{year:2011,month:12,day:5}
12 *
13 */
14 function bind(fn, obj){
15
16 if (typeof obj !== 'object') {
17 throw 'obj is not an object';
18 }
19 var args = Array.prototype.slice.call(arguments, 2);//将arguments转换为数组,并去掉前两项
20 return function(){
21 /*
22 形成一个闭包,在此匿名函数中保持了对嵌套父函数中的参数fn、obj,局部变量args的引用,也体现了js的静态(词法)作用域规则,
23 然后利用apply方法可以改变this指向的特点,使fn执行时,其内部如果出现this则代表传入的参数obj.
24 */
25 fn.apply(obj, args);
26 };
27 }
28
29 function countdownTimer(endDateParam){
30 /*
31 初始化部分开始
32 */
33 if (this == window) {
34 return new countdownTimer(endDateParam);
35 }
36
37 if (!endDateParam && typeof endDateParam !== 'object') {
38
39 /*
40 new Date时,三个参数分别代表年月日,月份是从0开始算的,如一月份,第二个参数是0,所以2011,8,11代表2011-9-11;但是如果一字符串形式"2011,8,11"则不是从0开始,但是ie6、7、8不支持此写法,ie9不知道
41 */
42 this.endDate = new Date(2011, 8, 11);
43 }
44 else {
45 this.endDate = new Date(endDateParam.year, endDateParam.month - 1, endDateParam.day);
46 }
47
48 var days = document.getElementById('days'), hours = document.getElementById('hours'), minutes = document.getElementById('minutes'), seconds = document.getElementById('seconds');
49
50 /*
51 初始化部分结束
52 */
53 this.show = function(daysValue, hoursValue, minutesValue, secondsValue){
54 days.innerHTML = daysValue;
55 hours.innerHTML = hoursValue;
56 minutes.innerHTML = minutesValue;
57 seconds.innerHTML = secondsValue;
58 }
59
60 return this;
61 }
62
63 countdownTimer.prototype = {
64 update: function(){
65
66 var nowDate = new Date();
67
68 var endMilliseconds = this.endDate.getTime(), nowMilliseconds = nowDate.getTime();
69 var remainingMilliseconds = endMilliseconds - nowMilliseconds;//微妙数值差
70 //按照无条件舍去规则转化为各个单位(天、时、分、秒)下的数值分量,如0.2天得到结果为0天
71
72 var remainingDays = Math.floor(remainingMilliseconds / (1000 * 60 * 60 * 24)), remainingHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60)) - remainingDays * 24, remainingMinutes = Math.floor(remainingMilliseconds / (1000 * 60)) - remainingHours * 60 - remainingDays * 24 * 60, remainingSeconds = Math.floor(remainingMilliseconds / 1000) - remainingMinutes * 60 - remainingHours * 60 * 60 - remainingDays * 24 * 60 * 60;
73
74 this.show(remainingDays, remainingHours, remainingMinutes, remainingSeconds);
75 },
76 start: function(){
77 this.timer = setInterval(bind(this.update, this), 1000);
78 },
79 stop: function(){
80 clearInterval(this.timer);
81 }
82 }
83 countdownTimer({
84 year: 2012,
85 month: 1,
86 day: 1
87 }).start();