一个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();

版权声明：本文为argb原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/argb/p/2118117.html