zoukankan      html  css  js  c++  java
  • 可扩展定制可复用的倒计时插件

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

  • 相关阅读:
    Begin Example with Override Encoded SOAP XML Serialization
    State Machine Terminology
    How to: Specify an Alternate Element Name for an XML Stream
    How to: Publish Metadata for a WCF Service.(What is the Metadata Exchange Endpoint purpose.)
    Beginning Guide With Controlling XML Serialization Using Attributes(XmlSerializaiton of Array)
    Workflow 4.0 Hosting Extensions
    What can we do in the CacheMetaData Method of Activity
    How and Why to use the System.servicemodel.MessageParameterAttribute in WCF
    How to: Begin Sample with Serialization and Deserialization an Object
    A Test WCF Service without anything of config.
  • 原文地址:https://www.cnblogs.com/liqingbo/p/4824447.html
Copyright © 2011-2022 走看看