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

倒计时功能在网站开发过程中经常遇到，像各大电商网站做促销或者团购网站，经常看到距离活动结束还剩多少天，多少小时，多少分钟，多少秒。因些我最近写了一个插件，方便日后使用和扩展，由于提高开发速度，我基于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();

这个插件你可以用到你网站的任何地方，商业非商业都行，不过恳请仁兄使用时保留备注或者注明代码来源，以对我写代码的鼓励及脑细胞的补偿，也方便日后迭代更新。使用时样式皮肤自行美化。

如果这篇文章对您有帮助，请前去 Github 点亮星星 star 来鼓励我写下去的勇气

posted @ 2015-09-20 21:50  不忘前行  阅读(313)  评论(0)  编辑  收藏  举报