可扩展定制可复用的倒计时插件

最新推荐文章于 2024-10-05 01:22:45 发布

alsr80962

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量140

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/liqingbo/p/4824447.html

版权

倒计时功能在网站开发过程中经常遇到，像各大电商网站做促销或者团购网站，经常看到距离活动结束还剩多少天，多少小时，多少分钟，多少秒。因些我最近写了一个插件，方便日后使用和扩展，由于提高开发速度，我基于jquery库利于面向对象的思想开发了。

这个倒计时插件js我给它起名为countDown,使用起来非常方便，只需配置几个参数而已，支持开始时间自定义，写好了与后台数据对接的接口，用这个插件可谓是省事再省事，省时再省时了，呵呵。

下面直接上代码：

 
       /** 
      
       * @Name：   易维护、可扩展定制的 倒计时插件 
      
       * @Author：  大兵博客（虾兵） @Blog：http://ddbing.com/ 
      
       * @param   参数暂支持三个，cid,data,nowDate。 
      
       * @param   cid: 倒计时模块id,以区分多个倒计时模块的情况。 
      
       * @param   nowDate: 开始时间，不设置则默认为系统当前时间。 
      
       * @param   data: 初始化后台传过来的活动结束时间数据，JSON格式如： 
      
       [ 
      
       { "id":"1",time:"2015/09/05 10:27:30" }, 
      
       { "id":"2",time:"2015/09/09 09:08:40" }, 
      
       { "id":"3",time:"2015/06/03 12:30:10" } 
      
       ]; 
      
       */ 
      
       ;( 
       function  
       ($, window, document, undefined) { 
      
       var  
       countDown =  
       function 
       (cid,data,nowDate){ 
      
       this 
       .cid = cid; 
      
       this 
       .data = data; 
      
       this 
       .nowDate = nowDate; 
      
       }; 
      
       countDown.prototype = { 
      
       constructor: countDown, 
      
       main:  
       function 
       (){ 
      
       var  
       that =  
       this 
       , data, newData = []; 
      
       this 
       .init(); 
      
       data = that.backData; 
      
       that.initTemp(data); 
      
       that._init ? that._init =  
       false 
       : 
       '' 
       ; 
      
       $.each(data, 
       function 
       (i,val){ 
      
       if  
       (val.ms) { 
      
       newData.push({id:val.id,ms:val.ms}); 
      
       }; 
      
       }); 
      
       that.backData = newData; 
      
       setTimeout( 
       function 
       (){ 
      
       that.handle(); 
      
       },1000); 
      
       }, 
      
       //初始化处理 
      
       init:  
       function 
       (){ 
      
       var  
       that =  
       this 
       , data = that.data, backData=[], ms = 0, msEnd, msNow, _init = that._init =  
       true 
       ; 
      
       msNow = (  
       new  
       Date(that.nowDate) ).getTime() || (  
       new  
       Date() ).getTime(); 
      
       $.each(data, 
       function 
       (i,val){ 
      
       msEnd =(  
       new  
       Date(val.time) ).getTime(); 
      
       ms = msEnd - msNow; 
      
       if  
       ( ms < 1000 ) { 
      
       that.msHandle(ms,val.id, 
       '-1' 
       ); 
      
       } 
       else 
       { 
      
       that.msHandle(ms,val.id); 
      
       }; 
      
       }); 
      
       }, 
      
       //初始转化时间格式 
      
       msHandle:  
       function 
       (ms,id,flag){ 
      
       var  
       D, H, M, S, objTime = {}, backData =  
       this 
       .backData ||  [] ; 
      
       if  
       (flag < 0) { 
      
       objTime = { 
      
       id: id, 
      
       no: flag 
      
       }; 
      
       backData.push(objTime); 
      
       } 
       else 
       { 
      
       S = Math.floor( ms/1000 ); 
      
       M = Math.floor( S/60 ); 
      
       H = Math.floor( M/60 ); 
      
       D = Math.floor( H/24 ); 
      
       S = S % 60; 
      
       M = M % 60; 
      
       H = H % 24; 
      
       objTime = { 
      
       id:id, 
      
       D:D, 
      
       H:H, 
      
       M:M, 
      
       S:S, 
      
       ms:ms 
      
       }; 
      
       objTime =  
       this 
       .normTime(objTime); 
      
       backData.push(objTime); 
      
       }; 
      
       this 
       .backData = backData; 
      
       return  
       this 
       ; 
      
       }, 
      
       //倒计时定时器 
      
       handle:  
       function 
       (){ 
      
       var  
       that =  
       this 
       , timer, data = that.backData, cid =  
       this 
       .cid; 
      
       $.each(data, 
       function 
       (i,val){ 
      
       var  
       ms = val.ms; 
      
       if  
       (ms < 1000) { 
      
       $( 
       '#' 
       +cid).find( 
       '#count' 
       +val.id).html( 
       '距离活动结束还剩：活动已结束' 
       ); 
      
       } 
       else 
       { 
      
       ms -= 1000; 
      
       that.msChange(ms, val.id); 
      
       data[i].ms = ms; 
      
       }; 
      
       }); 
      
       !!timer && clearTimeout(timer); 
      
       timer = setTimeout( 
       function 
       (){ 
      
       that.handle(); 
      
       },1000); 
      
       }, 
      
       //ms处理 
      
       msChange:  
       function 
       (ms,id){ 
      
       var  
       D, H, M, S, objTime = {},cid =  
       this 
       .cid, data =  
       this 
       .backData; 
      
       S = Math.floor( ms/1000 ); 
      
       M = Math.floor( S/60 ); 
      
       H = Math.floor( M/60 ); 
      
       D = Math.floor( H/24 ); 
      
       S = S % 60; 
      
       M = M % 60; 
      
       H = H % 24; 
      
       objTime = { 
      
       id:id, 
      
       D:D, 
      
       H:H, 
      
       M:M, 
      
       S:S 
      
       }; 
      
       objTime =  
       this 
       .normTime(objTime); 
      
       $( 
       '#' 
       +cid).find( 
       '#count' 
       +id).children( 
       '.d' 
       ).children( 
       'i' 
       ).text( objTime.D ); 
      
       $( 
       '#' 
       +cid).find( 
       '#count' 
       +id).children( 
       '.h' 
       ).children( 
       'i' 
       ).text( objTime.H ); 
      
       $( 
       '#' 
       +cid).find( 
       '#count' 
       +id).children( 
       '.m' 
       ).children( 
       'i' 
       ).text( objTime.M ); 
      
       $( 
       '#' 
       +cid).find( 
       '#count' 
       +id).children( 
       '.s' 
       ).children( 
       'i' 
       ).text( objTime.S ); 
      
       }, 
      
       //统一处理时刻格式 
      
       normTime:  
       function 
       (objTime){ 
      
       for  
       ( 
       var  
       i  
       in  
       objTime) { 
      
       if  
       (objTime.hasOwnProperty(i) && i !=  
       'id' 
       ) { 
      
       objTime[i] = objTime[i] < 10  ?  
       '0'  
       + objTime[i] : objTime[i]; 
      
       }; 
      
       }; 
      
       return  
       objTime; 
      
       }, 
      
       //初始化模板 
      
       initTemp:  
       function 
       (data){ 
      
       var  
       temp =  
       '' 
       ; 
      
       $.each(data, 
       function 
       (i,val){ 
      
       if  
       (val.no < 0) { 
      
       temp += 
       '距离活动结束还剩：活动已结束' 
       ; 
      
       } 
       else 
       { 
      
       temp += 
       '距离活动结束还剩：' 
       + val.D + 
       '天' 
      
       + 
       '' 
       + val.H + 
       '时' 
       + val.M + 
       '分' 
      
       + 
       '' 
       + val.S + 
       '秒' 
      
       + 
       '' 
       ; 
      
       }; 
      
       }); 
      
       temp += 
       '' 
       ; 
      
       $( 
       '#' 
       + 
       this 
       .cid).append(temp); 
      
       } 
      
       }; 
      
       window.countDown = countDown; 
      
       }(jQuery, window, document));

这段代码就不多解释了，参数上面一段备注已很详细，js中每个功能函数也有备注。

HMTL中调用方式如下：

 
       var  
       time_data = [ 
      
 
                
       {  
       "id" 
       : 
       "1" 
       ,time: 
       "2015/09/05 10:27:30"  
       }, 
      
 
                
       {  
       "id" 
       : 
       "2" 
       ,time: 
       "2015/09/09 09:08:40"  
       }, 
      
 
                
       {  
       "id" 
       : 
       "3" 
       ,time: 
       "2015/06/03 12:30:10"  
       }, 
      
 
                
       {  
       "id" 
       : 
       "4" 
       ,time: 
       "2015/10/12 13:15:30"  
       }, 
      
 
                
       {  
       "id" 
       : 
       "5" 
       ,time: 
       "2015/09/11 18:36:40"  
       } 
      
 
            
       ]; 
      
 
       /** 
      
 
       * @param 创建倒计时对象 
      
 
       * @param 倒计时模块id:countdown1 
      
 
       * @param 倒计时初始化数据 
      
 
       * @param 最后一个参数倒计时开始时间，格式如："2015/09/03 10:30:00"，不传则默认为系统当前时间 
      
 
       */ 
      
 
       var  
       tCountDown =  
       new  
       countDown( 
       'countdown1' 
       ,time_data, 
       '2015/09/03 10:30:00' 
       ); 
      
 
       tCountDown.main(); 
      