【项目分析】设计一个计时器的jQuery插件(4)（附赠：中秋节祝福）

背景

目前团队所负责的公务员考试的项目中，需要使用到计数器的前端JS组件，具体应用可以查看页面。

你会发现这里的计时器代码有些问题。

这里使用的是

代码

this ._timerId  =  window.setInterval( function () { 
                    $ this ._step(); 
                },  1000 );

// …

_step:  function () { 
            if  ( this ._pattern  ==   ' down ' ) 
                this ._currentTime  -=   1 ; 
            else  
                this ._currentTime  +=   1 ; 
            // 每秒执行一次回调函数 
            if  ( this ._currentTime  ==   0   ||   this ._currentTime  >   this ._totalTime) { 
                this .Stop(); 
           } 
            else  { 
                this ._runCallBack( this ._onInterval); 
           } 
       }

 

可以发现，这里在触发1秒的时候，使用的是直接增加1秒或者减少1秒的方式进行。这样是不合理的。我们可以发现我们在浏览器上选择右键，这里的计时器会被停止，当你下次再触发事件的时候，时间就不准确了。这样，只要用户点击右键，就能够把计时器给停掉。有的人说，可以屏蔽右键，但是并不是所有浏览器，都能够支持屏蔽右键，并且还有其他的方式能够使计时器停止；或者，可以使用flash来实现的计时器的功能，嗯，这样是可以的，只是我们的开发人员对于flash不是很熟悉，于是想还是自己重新设计下这个JS的计时器组件。

于是我这里采用了jQuery插件的方式来重写这个计时器组件。

 

具体分析

1. 首先先来看下最后的调用方法是什么样的：

代码

< div  id ="counter-1" >  
</ div >

< div  id ="counter-2" >  
</ div >

$('#counter-1').counter({ 'pattern': 'down', 'totalTime': 3600, 'onInterval': fnInterval, 'onStop': fnStop }); 
$('#counter-2').counter({ 'pattern': 'up' });

 

通过代码可以很直观的看到实现的方式，其中pattern是计时器的方式（累减或者累加），totalTime是倒计时总时间，onInterval是每跳动一次计时器，需要触发的事件，onStop是等计时器倒计时完毕后触发的事件。

 

2. 然后，来看看jquery.counter.js中的核心代码：

代码

/*  主函数  */  
$.fn.counter  =   function (options) { 
     var  args  =  Array.prototype.slice.call(arguments,  1 ); 

     return   this .each( function () { 
         if  ( typeof  options  ==   ' string ' ) { 
            $.counter[ ' _ '   +  options  +   ' Counter ' ].apply($.counter, [ this ].concat(args)); 
        } 
         else  { 
            $.counter._attachCounter( this , options); 
        } 
    }); 
};

 

这里的options是Object类型的，所以调用 $.counter._attachCounter(this, options)。

接着看：

代码

/*  绑定计数器  */  
_attachCounter:  function (target, options) { 
     var  inst  =  { options: $.extend({  ' from ' :  new  Date() }, options) }; 
    $.data(target, DATA_NAME, inst); 
     this ._changeCounter(target); 
}

 

这里把inst的选项数据作为一个数据对象在客户端保存起来 $.data(target, DATA_NAME, inst);

/*  重置计数器  */  
_changeCounter:  function (target) { 
     this ._addTarget(target); 
     this ._updateCounter(target); 

}

 其中_addTarget是为了把目标的jQuery对象放在一个目标计时器列表_timerTargets中去维护。

代码

/*  重新显示计数器  */  
_updateCounter:  function (target) { 

     var  remainTime  =   this ._getTime(target); 
     if  (remainTime) { 
         // 回调函数调用 
         var  inst  =  $.data(target, DATA_NAME); 
         if  (remainTime  >=   0 ) { 
             var  time  =   this ._getFormatTime(remainTime); 
            $(target).html(time); 

             var  onInterval  =   this ._get(inst,  ' onInterval ' ); 
             if  (onInterval) { 
                onInterval.apply(target, [remainTime]); 
            } 
        } 
         else  { 
            remainTime  =   0 ; 
             var  time  =   this ._getFormatTime(remainTime); 
            $(target).html(time); 

             var  onStop  =   this ._get(inst,  ' onStop ' ); 
             if  (onStop) { 
                onStop.apply(target, []); 
                 this ._removeTarget(target); 
            } 
        } 
    }

这里是前端显示的核心代码，onInterval，onStop会触发相关的事件；

通过from的起始设置的时间，来每次触发时候相减来计算剩余时间，而不是像前面那种JS组件那边，每隔一秒加（减）1。

 

3. 具体计时的是在何时触发的呢?

$.extend(Counter.prototype, { 
     /*  共享所有的timer  */  
    _timer: setInterval( function () { $.counter._updateTargets(); },  900 ), 
     /*  当前激活的timer列表  */  
    _timerTargets: [],

    …

});

 

这里每隔900毫秒会执行一次事件（可以根据您的情况来设置）

代码

var  remainTime  =   this ._getTime(target);可以获得剩余的时间；

/*  获取当前计数器的时间秒数  */  
_getTime:  function (target) { 
     var  inst  =  $.data(target, DATA_NAME); 
     if  (inst) { 
         var  pattern  =   this ._get(inst,  ' pattern ' ); 
         if  (pattern  ==   ' down ' ) { 
             var  totalTime  =   this ._get(inst,  ' totalTime ' ); 
             var  from  =   this ._get(inst,  ' from ' ); 
             var  nowDate  =   new  Date(); 
             var  remainTime  =  parseInt((totalTime  *   1000   -  (nowDate.getTime()  -  from.getTime()))  /   1000 ); 
             return  remainTime; 
        } 
         else   if  (pattern  ==   ' up ' ) { 
             var  from  =   this ._get(inst,  ' from ' ); 
             var  nowDate  =   new  Date(); 
             var  remainTime  =  parseInt((nowDate.getTime()  -  from.getTime())  /   1000 ); 
             return  remainTime; 
        } 
    } 
     return   null ; 
}

 

4. 通过getTime方法来获取剩余时间：

代码

/*  获取计时器当前时间（总秒数）  */  
$.fn.getTime  =   function () { 
     var  args  =  Array.prototype.slice.call(arguments,  1 ); 
     if  ( this .length  ==   1 ) { 
         return  $.counter[ ' _getTime ' ].apply($.counter, [ this [ 0 ]].concat(args)); 
    } 
     else   if  ( this .length  >   1 ) { 
         var  array  =  []; 
         this .each( function () { 
         var  time  =  $.counter[ ' _getTime ' ].apply($.counter, [ this ].concat(args)); 
             if  (time) { 
                array.push(time); 
            } 
        }); 
         return  array; 
    } 
     return   null ; 
};

 

调用方式为：

$('#counter-1').getTime()

 

5. 通过string参数来实现暂停和继续的功能：

$( ' #btnPause ' ).toggle( function () { 
    $( this ).val( ' 继续 ' ); 
    $( ' .counter ' ).counter( ' pause ' ); 
},  function () { 
    $( this ).val( ' 暂停 ' ); 
    $( ' .counter ' ).counter( ' resume ' ); 
} 
);

 

 

其他的请看完整代码：

代码

/*
* 计数器jQuery插件
* Copyright: Leepy
* Update: 2010-09-22
* Home:   http://www.cnblogs.com/liping13599168/
*/

( function ($) {

     function  Counter() {
         /*  计数器默认配置  */
         this ._defaults  =  {
            pattern:  ' down ' ,     //  可选择参数：'up', 'down'；默认方式为减计数
            totalTime:  3600 ,     //  总共需要多少时间，单位为秒
            until:  null ,         //  默认直到日期的配置
            onInterval:  null ,    //  间隔时间回调函数
            onStop:  null          //  结束时回调函数
        }
    }

     var  DATA_NAME  =   ' data_counter ' ;

    $.extend(Counter.prototype, {
         /*  共享所有的timer  */
        _timer: setInterval( function () { $.counter._updateTargets(); },  900 ),
         /*  当前激活的timer列表  */
        _timerTargets: [],
         /*  更新每一个绑定的目标计数器  */
        _updateTargets:  function () {
             for  ( var  i  =   0 , length  =   this ._timerTargets.length; i  <  length; i ++ ) {
                 this ._updateCounter( this ._timerTargets[i]);
            }
        },
         /*  绑定计数器  */
        _attachCounter:  function (target, options) {
             var  inst  =  { options: $.extend({  ' from ' :  new  Date() }, options) };
            $.data(target, DATA_NAME, inst);
             this ._changeCounter(target);
        },
         /*  重置计数器  */
        _changeCounter:  function (target) {
             this ._addTarget(target);
             this ._updateCounter(target);

        },
         /*  重新显示计数器  */
        _updateCounter:  function (target) {

             var  remainTime  =   this ._getTime(target);
             if  (remainTime) {
                 // 回调函数调用
                 var  inst  =  $.data(target, DATA_NAME);
                 if  (remainTime  >=   0 ) {
                     var  time  =   this ._getFormatTime(remainTime);
                    $(target).html(time);

                     var  onInterval  =   this ._get(inst,  ' onInterval ' );
                     if  (onInterval) {
                        onInterval.apply(target, [remainTime]);
                    }
                }
                 else  {
                    remainTime  =   0 ;
                     var  time  =   this ._getFormatTime(remainTime);
                    $(target).html(time);

                     var  onStop  =   this ._get(inst,  ' onStop ' );
                     if  (onStop) {
                        onStop.apply(target, []);
                         this ._removeTarget(target);
                    }
                }
            }

        },
         /*  暂停计数器  */
        _pauseCounter:  function (target) {
             var  inst  =  $.data(target, DATA_NAME);
             if  (inst) {
                 var  pauseTime  =   new  Date();
                $.extend(inst.options, {  ' pauseTime ' : pauseTime });
                $.data(target, DATA_NAME, inst);
                 this ._removeTarget(target);
            }
        },
         /*  重新启动计数器  */
        _resumeCounter:  function (target) {
             var  inst  =  $.data(target, DATA_NAME);
             if  (inst) {
                 var  nowDate  =   new  Date();
                 var  pauseTime  =   this ._get(inst,  ' pauseTime ' );
                 var  from  =   this ._get(inst,  ' from ' );
                 if  (pauseTime) {
                     var  fromTime  =   new  Date(from.getTime()  +  (nowDate.getTime()  -  pauseTime.getTime()));
                    $.extend(inst.options, {  ' from ' : fromTime });
                    $.data(target, DATA_NAME, inst);
                     this ._changeCounter(target);
                }
            }
        },
         /*  获取当前计数器的时间秒数  */
        _getTime:  function (target) {
             var  inst  =  $.data(target, DATA_NAME);
             if  (inst) {
                 var  pattern  =   this ._get(inst,  ' pattern ' );
                 if  (pattern  ==   ' down ' ) {
                     var  totalTime  =   this ._get(inst,  ' totalTime ' );
                     var  from  =   this ._get(inst,  ' from ' );
                     var  nowDate  =   new  Date();
                     var  remainTime  =  parseInt((totalTime  *   1000   -  (nowDate.getTime()  -  from.getTime()))  /   1000 );
                     return  remainTime;
                }
                 else   if  (pattern  ==   ' up ' ) {
                     var  from  =   this ._get(inst,  ' from ' );
                     var  nowDate  =   new  Date();
                     var  remainTime  =  parseInt((nowDate.getTime()  -  from.getTime())  /   1000 );
                     return  remainTime;
                }
            }
             return   null ;
        },
         /*  获取格式化的时间  */
        _getFormatTime:  function (remainTime) {
             var  hour  =  parseInt(remainTime  /   3600 );
             var  min  =  parseInt(remainTime  /   60 )  %   60 ;
             var  second  =  remainTime  %   60 ;
             var  time  =   this ._stringFormat( ' {0}:{1}:{2} ' ,
                    (hour  <   10   ?   ' 0 '   +  hour : hour),
                    (min  <   10   ?   ' 0 '   +  min : min),
                    (second  <   10   ?   ' 0 '   +  second : second));
             return  time;
        },
         /*  从配置中获取指定名称的值  */
        _get:  function (inst, name) {
             return  inst.options[name]  !=   null   ?  inst.options[name] : $.counter._defaults[name];
        },
         /*  添加到目标计数器列表中  */
        _addTarget:  function (target) {
             if  ( ! this ._hasTarget(target))  this ._timerTargets.push(target);
        },
         /*  是否已经包含在目标计数器列表中  */
        _hasTarget:  function (target) {
             return  ($.inArray(target,  this ._timerTargets)  >   - 1 );
        },
         /*  移除指定目标计数器  */
        _removeTarget:  function (target) {
             this ._timerTargets  =  $.map( this ._timerTargets,  function (o) {  return  (o  ==  target  ?   null  : o); });
        },
         // string格式化构造器
        _stringFormat:  function (str) {
             var  args  =  arguments;
             return  str.replace( / \{(\d+)\} / g,
                 function (m, i) {
                     return  args[parseInt(i)  +   1 ];
                });
        }
    });

     /*  主函数  */
    $.fn.counter  =   function (options) {
         var  args  =  Array.prototype.slice.call(arguments,  1 );

         return   this .each( function () {
             if  ( typeof  options  ==   ' string ' ) {
                $.counter[ ' _ '   +  options  +   ' Counter ' ].apply($.counter, [ this ].concat(args));
            }
             else  {
                $.counter._attachCounter( this , options);
            }
        });
    };
     /*  获取计时器当前时间（总秒数）  */
    $.fn.getTime  =   function () {
         var  args  =  Array.prototype.slice.call(arguments,  1 );
         if  ( this .length  ==   1 ) {
             return  $.counter[ ' _getTime ' ].apply($.counter, [ this [ 0 ]].concat(args));
        }
         else   if  ( this .length  >   1 ) {
             var  array  =  [];
             this .each( function () {
             var  time  =  $.counter[ ' _getTime ' ].apply($.counter, [ this ].concat(args));
                 if  (time) {
                    array.push(time);
                }
            });
             return  array;
        }
         return   null ;
    };

    $.counter  =   new  Counter();

})(jQuery);

 

 

附上源代码下载：CounterJSLab.rar

 

最后啦，今天是中秋节，引用一下一位同事的祝福词咯！

忍养安,乐养寿,爱养福,善养运,佛养心,道养行,学养德,诚养誉,礼养谊,动养身,天养地,古养今,问候养情谊! 祝各位博客园的园友中秋快乐！