jquery-countdown插件教程

来源：互联网发布：mac ftp 看不到文件夹编辑：程序博客网时间：2024/06/06 01:23
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/DDMM/DD/YYYYYYYY/MM/DD hh:mm:ssMM/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.countdownfinish.countdownstoped.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) {        /*        匹配指令：        %-字母        %!字母        %字母        %字母:其它字符;         */            var directives = format.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);            if (directives) {            // 对匹配到的每个指令，进行解析                for (var i = 0, len = directives.length; i < len; ++i) {                    var directive = 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) {        var plural = "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.countdownfinish.countdownstoped.countdown2>每个事件的额外属性：        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('开始抽奖');});
0 0