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

posted on 2011-07-27 12:54  argb  阅读(6643)  评论(0编辑  收藏  举报

导航