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) {

			        	/*
			        		匹配指令：
				        		%-字母
				        		%!字母
				        		%字母
				        		%字母:其它字符;
			        	 */
			            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.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('开始抽奖');
		});