jquery-countdown插件教程

1.使用:  

    $('#clock').countdown(finalData[, callback(或options)]);  

    finalData - 必选  

    options - 可选  


2.参数:  

1>finalData - 设置倒计时的终止时间  

        3种格式:  

            1)原生的 'Date' 对象  

            2)毫秒格式的 '时间戳'(javascript的时间戳,单位是 '毫秒',切记!)  

                matchers.push(/^[0-9]*$/.source);  

                源码中的正则:  

                    matchers.push(/^[0-9]*$/.source);  

            3)字符串格式的时间  

                YYYY/MM/DD  

                MM/DD/YYYY  

                YYYY/MM/DD hh:mm:ss  

                MM/DD/YYYY hh:mm:ss  

                源码中的正则:   

                    matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);  

                    matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);  


2>callback(或options) - 回调函数 或者 options 对象  


        1)callback - 倒计时,有3个事件类型,都绑定上回调方法!  

            function(event) {}  


            源码分析:  

                this.$el.on("update.countdown", options);  

                this.$el.on("stoped.countdown", options);  

                this.$el.on("finish.countdown", options);  


        2)options - 传递一个对象,覆盖 'countdown' 的默认配置,默认配置有3个:  

defaultOptions = {  

                precision: 100,         // int  - 更新速率(毫秒为单位)  

                elapse: false,          // bool - 倒计时结束后,是否继续  

                defer: false            // bool - 延迟初始化模式  

            }  


            1.precision - 倒计时的精度  

                源码分析:  

this.interval = setInterval(function() {  

                        self.update.call(self);  

                    }, this.options.precision);     // setInterval()的第二个参数  


            2.elapse - 过期模式  

                false - 一旦到达设定的最终时间,停止计时。(默认)  

                true - 到达最终时间,继续执行倒计时。  

                源码分析:  

if (!this.options.elapse &&this.totalSecsLeft === 0) {     // 到达最终事件  

                        this.stop();                    // 停止计时  

                        this.dispatchEvent("finish");   // 分发 'finish' 事件  

                    } else {  

                        this.dispatchEvent("update");   // 分发 'update' 事件  

                    }  

                    --------  

                    一旦到达终止时间,会传递给事件对象,一个属性:  

                        event.elapsed - 是否已经过期  

this.elapsed = now >= this.finalDate;  


            3.defer - 是否延迟启动  

                false - 表示初始化了 '倒计时对象',会自动开始计时。(默认)  

                true - 在实例化对象后,需要我们来手动启动计时。  

                源码分析:  

if (this.options.defer === false) {  

                        this.start();  

                    }  


3.事件:  

    3个事件方法:  

        update.countdown  

        finish.countdown  

        stoped.countdown            // 这个得说明下,文档中,应该是错误的!源码中是:'stoped',文档中写的是 'stop'  

    3个事件,都有一个 'namespace-命名空间','.countdown'  

    每个事件对象,具备额外的公共属性:  

event.finalDate = this.finalDate;           // 设定的终止时间  

event.elapsed = this.elapsed;               // 是否已经过期  

event.offset = $.extend({}, this.offset);   // 当前时间,在各个时间刻度上的计算  

            源码分析:  

this.offset = {  

                    seconds: this.totalSecsLeft % 60,  

                    minutes: Math.floor(this.totalSecsLeft / 60) % 60,  

                    hours: Math.floor(this.totalSecsLeft / 60 / 60) % 24,  

                    days: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,  

                    daysToWeek: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,  

                    daysToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 % 30.4368),  

                    weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),  

                    weeksToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7) % 4,  

                    months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30.4368),  

                    years: Math.abs(this.finalDate.getFullYear() - now.getFullYear()),  

                    totalDays: Math.floor(this.totalSecsLeft / 60 / 60 / 24),  

                    totalHours: Math.floor(this.totalSecsLeft / 60 / 60),  

                    totalMinutes: Math.floor(this.totalSecsLeft / 60),  

                    totalSeconds: this.totalSecsLeft  

                };  

event.strftime = strftime(this.offset);     // 格式化时间函数  

            源码分析:  

                function strftime(offsetObject) {  

                    return function(format) {  


                        /*  

                            匹配指令:  

                                %-字母  

                                %!字母  

                                %字母  

                                %字母:其它字符;  

                         */  

vardirectives = format.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);  

                        if (directives) {  


                            // 对匹配到的每个指令,进行解析  

for (vari = 0, len = directives.length; i < len; ++i) {  

vardirective = directives[i].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/),   

regexp = escapedRegExp(directive[0]),   // 正则  

modifier = directive[1] || "",          // 模式:- | ! | ""  

plural = directive[3] || "",            // :其他字符; ------ 和 '!' 模式一起使用  

value = null;  

directive = directive[2];               // 表示时间刻度的字母(Y,m,n,d,w...)  


                                // 匹配到了该字母对应的时间值,进行字符替换  

                                if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {  

value = DIRECTIVE_KEY_MAP[directive];  

value = Number(offsetObject[value]);  

                                }  

                                if (value !== null) {  


                                    // '!'模式,执行 'pluralize',会需要 '(:[^;]+;)' 匹配到的值   

if (modifier === "!") {  

value = pluralize(plural, value);  

                                    }  


                                    // ""模式,小于10,填充 '0'  

if (modifier === "") {  

if (value< 10) {  

value = "0" + value.toString();  

                                        }  

                                    }  

format = format.replace(regexp, value.toString());  

                                }  

                            }  

                        }  

format = format.replace(/%%/, "%");  

                        return format;  

                    };  

                }  


                // '!' 模式时,提供对复数的多元化支持,默认复数会添加 's',我们可使用自定义的后缀 '...'  

                function pluralize(format, count) {  

varplural = "s", singular = "";  

                    if (format) {  


                        // 去除:, ; , '空白'。使用 ',' 分隔单数和复数的2种格式  

format = format.replace(/(:|;|\s)/gi, "").split(/\,/);  

if (format.length === 1) {  

plural = format[0];  

                        } else {  

singular = format[0];  

plural = format[1];  

                        }  

                    }  


// 当时间刻度> 1,返回复数格式,否则为单数  

if (Math.abs(count)> 1) {  

                        return plural;  

                    } else {  

                        return singular;  

                    }  

                }  


4.event.strftime - 格式化函数,是一个简单的格式化程序,有助于保持代码更加语义,并且避免重复的工作。  

    它根据给定格式字符串中的指令来格式化偏移日期。 该指令由百分比(%)组成。 未列为指令的任何文本将被传递到输出字符串。  

    event.strftime(%W weeks %-d days %-H h %M min %S sec');  

    /*  

        Y: "years",  

        m: "months",  

        n: "daysToMonth",  

        d: "daysToWeek",  

        w: "weeks",  

        W: "weeksToMonth",  

        H: "hours",  

        M: "minutes",  

        S: "seconds",  

        D: "totalDays",  

        I: "totalHours",  

        N: "totalMinutes",  

        T: "totalSeconds"  

     */  


    所有的指令,包含0填充(01,02,03)和空白填充'1,2,3'版本,默认是0填充,不需要0填充,使用-%D。  

        -  


    模式:  

        -   // 空白填充  

        !   // 多元化复数模式  

            默认:复数添加 's',单数不变  

%!H         // 当 hour>1,结尾添加 's'  

%!H:hours   // 当 hour>1,结尾添加 'hours'  

%!H:hour,hours;     // 当 hour>1,结尾添加 'hours',hour<1,为单数,添加 'hour'。',' 分隔的,前为单数添加的字符,后为复数添加的字符  


5.控制:  

    resume - 恢复  

    pause  - 暂停  

    ------------  

    start  - 开始  

    stop   - 停止  

    pause/resume,本质就是 start/stop 的别名  

    源码分析:  

        pause: function() {  

            this.stop();  

        },  

        resume: function() {  

            this.start();  

        },  


6.countdown插件,本身只做时间的处理,并没做任何时间的默认展示,需要我们自己来做。  

    我们需要做的就是:  

        1.调用countdown(),传递一个 '终止时间'   

        2.绑定countdown相关事件,在事件内,进行我们的展示处理:  

            上面讲了事件的相关内容:  

1>3个事件方法:  

                    update.countdown  

                    finish.countdown  

                    stoped.countdown  

2>每个事件的额外属性:  

event.finalDate = this.finalDate;           // 设定的终止时间  

event.elapsed = this.elapsed;               // 是否已经过期  

event.offset = $.extend({}, this.offset);   // 当前时间,在各个时间刻度上的计算  

event.strftime = strftime(this.offset);     // 格式化时间函数  

    示例:  

        $('#countdown').countdown("2017/5/1")  

        .on('update.countdown', function(){  

format = "还剩%D天, %H时, %M分, %S秒开始抽奖";            // 指定格式字符串  

            $(this).html(event.strftime(format));               // 将格式字符串,传递给 'event.strftime()' 解析  

        })  

        .on('finish.countdown', function(){  

            $(this).html('开始抽奖');  

        });  



转载自: https://blog.csdn.net/beyond__devil/article/details/70504654

你可能感兴趣的:(jquery-countdown插件教程)