一个js倒计时器(countdown timer)

时间：2021-07-17 20:32:30

项目中用到的一个倒计时器，直接上代码：

 

 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();
标签：

相关文章