jquery-countdown插件

为以后自己学习用~好查找。侵删。

[html]  view plain  copy
  1. 1.使用:  
  2.     $('#clock').countdown(finalData[, callback(或options)]);  
  3.     finalData - 必选  
  4.     options - 可选  
  5.   
  6. 2.参数:  
  7.     1>finalData - 设置倒计时的终止时间  
  8.         3种格式:  
  9.             1)原生的 'Date' 对象  
  10.             2)毫秒格式的 '时间戳'(javascript的时间戳,单位是 '毫秒',切记!)  
  11.                 matchers.push(/^[0-9]*$/.source);  
  12.                 源码中的正则:  
  13.                     matchers.push(/^[0-9]*$/.source);  
  14.             3)字符串格式的时间  
  15.                 YYYY/MM/DD  
  16.                 MM/DD/YYYY  
  17.                 YYYY/MM/DD hh:mm:ss  
  18.                 MM/DD/YYYY hh:mm:ss  
  19.                 源码中的正则:   
  20.                     matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);  
  21.                     matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);  
  22.   
  23.     2>callback(或options) - 回调函数 或者 options 对象  
  24.   
  25.         1)callback - 倒计时,有3个事件类型,都绑定上回调方法!  
  26.             function(event) {}  
  27.   
  28.             源码分析:  
  29.                 this.$el.on("update.countdown", options);  
  30.                 this.$el.on("stoped.countdown", options);  
  31.                 this.$el.on("finish.countdown", options);  
  32.   
  33.         2)options - 传递一个对象,覆盖 'countdown' 的默认配置,默认配置有3个:  
  34.             defaultOptions = {  
  35.                 precision: 100,         // int  - 更新速率(毫秒为单位)  
  36.                 elapse: false,          // bool - 倒计时结束后,是否继续  
  37.                 defer: false            // bool - 延迟初始化模式  
  38.             }  
  39.   
  40.             1.precision - 倒计时的精度  
  41.                 源码分析:  
  42.                     this.interval = setInterval(function() {  
  43.                         self.update.call(self);  
  44.                     }, this.options.precision);     // setInterval()的第二个参数  
  45.   
  46.             2.elapse - 过期模式  
  47.                 false - 一旦到达设定的最终时间,停止计时。(默认)  
  48.                 true - 到达最终时间,继续执行倒计时。  
  49.                 源码分析:  
  50.                     if (!this.options.elapse && this.totalSecsLeft === 0) {     // 到达最终事件  
  51.                         this.stop();                    // 停止计时  
  52.                         this.dispatchEvent("finish");   // 分发 'finish' 事件  
  53.                     } else {  
  54.                         this.dispatchEvent("update");   // 分发 'update' 事件  
  55.                     }  
  56.                     --------  
  57.                     一旦到达终止时间,会传递给事件对象,一个属性:  
  58.                         event.elapsed - 是否已经过期  
  59.                         this.elapsed = now >= this.finalDate;  
  60.   
  61.             3.defer - 是否延迟启动  
  62.                 false - 表示初始化了 '倒计时对象',会自动开始计时。(默认)  
  63.                 true - 在实例化对象后,需要我们来手动启动计时。  
  64.                 源码分析:  
  65.                     if (this.options.defer === false) {  
  66.                         this.start();  
  67.                     }  
  68.   
  69. 3.事件:  
  70.     3个事件方法:  
  71.         update.countdown  
  72.         finish.countdown  
  73.         stoped.countdown            // 这个得说明下,文档中,应该是错误的!源码中是:'stoped',文档中写的是 'stop'  
  74.     3个事件,都有一个 'namespace-命名空间','.countdown'  
  75.     每个事件对象,具备额外的公共属性:  
  76.         event.finalDate = this.finalDate;           // 设定的终止时间  
  77.         event.elapsed = this.elapsed;               // 是否已经过期  
  78.         event.offset = $.extend({}, this.offset);   // 当前时间,在各个时间刻度上的计算  
  79.             源码分析:  
  80.                 this.offset = {  
  81.                     seconds: this.totalSecsLeft % 60,  
  82.                     minutes: Math.floor(this.totalSecsLeft / 60) % 60,  
  83.                     hours: Math.floor(this.totalSecsLeft / 60 / 60) % 24,  
  84.                     days: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,  
  85.                     daysToWeek: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,  
  86.                     daysToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 % 30.4368),  
  87.                     weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),  
  88.                     weeksToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7) % 4,  
  89.                     months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30.4368),  
  90.                     years: Math.abs(this.finalDate.getFullYear() - now.getFullYear()),  
  91.                     totalDays: Math.floor(this.totalSecsLeft / 60 / 60 / 24),  
  92.                     totalHours: Math.floor(this.totalSecsLeft / 60 / 60),  
  93.                     totalMinutes: Math.floor(this.totalSecsLeft / 60),  
  94.                     totalSeconds: this.totalSecsLeft  
  95.                 };  
  96.         event.strftime = strftime(this.offset);     // 格式化时间函数  
  97.             源码分析:  
  98.                 function strftime(offsetObject) {  
  99.                     return function(format) {  
  100.   
  101.                         /*  
  102.                             匹配指令:  
  103.                                 %-字母  
  104.                                 %!字母  
  105.                                 %字母  
  106.                                 %字母:其它字符;  
  107.                          */  
  108.                         var directives = format.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);  
  109.                         if (directives) {  
  110.   
  111.                             // 对匹配到的每个指令,进行解析  
  112.                             for (var i = 0len = directives.length; i < len; ++i) {  
  113.                                 var directive = directives[i].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/),   
  114.                                 regexp = escapedRegExp(directive[0]),   // 正则  
  115.                                 modifier = directive[1] || "",          // 模式:- | ! | ""  
  116.                                 plural = directive[3] || "",            // :其他字符; ------ 和 '!' 模式一起使用  
  117.                                 value = null;  
  118.                                 directive = directive[2];               // 表示时间刻度的字母(Y,m,n,d,w...)  
  119.   
  120.                                 // 匹配到了该字母对应的时间值,进行字符替换  
  121.                                 if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {  
  122.                                     value = DIRECTIVE_KEY_MAP[directive];  
  123.                                     value = Number(offsetObject[value]);  
  124.                                 }  
  125.                                 if (value !== null) {  
  126.   
  127.                                     // '!'模式,执行 'pluralize',会需要 '(:[^;]+;)' 匹配到的值   
  128.                                     if (modifier === "!") {  
  129.                                         value = pluralize(plural, value);  
  130.                                     }  
  131.   
  132.                                     // ""模式,小于10,填充 '0'  
  133.                                     if (modifier === "") {  
  134.                                         if (value < 10) {  
  135.                                             value = "0" + value.toString();  
  136.                                         }  
  137.                                     }  
  138.                                     format = format.replace(regexp, value.toString());  
  139.                                 }  
  140.                             }  
  141.                         }  
  142.                         format = format.replace(/%%/, "%");  
  143.                         return format;  
  144.                     };  
  145.                 }  
  146.   
  147.                 // '!' 模式时,提供对复数的多元化支持,默认复数会添加 's',我们可使用自定义的后缀 '...'  
  148.                 function pluralize(format, count) {  
  149.                     var plural = "s"singular = "";  
  150.                     if (format) {  
  151.   
  152.                         // 去除:, ; , '空白'。使用 ',' 分隔单数和复数的2种格式  
  153.                         format = format.replace(/(:|;|\s)/gi, "").split(/\,/);  
  154.                         if (format.length === 1) {  
  155.                             plural = format[0];  
  156.                         } else {  
  157.                             singular = format[0];  
  158.                             plural = format[1];  
  159.                         }  
  160.                     }  
  161.   
  162.                     // 当时间刻度 > 1,返回复数格式,否则为单数  
  163.                     if (Math.abs(count) > 1) {  
  164.                         return plural;  
  165.                     } else {  
  166.                         return singular;  
  167.                     }  
  168.                 }  
  169.   
  170. 4.event.strftime - 格式化函数,是一个简单的格式化程序,有助于保持代码更加语义,并且避免重复的工作。  
  171.     它根据给定格式字符串中的指令来格式化偏移日期。 该指令由百分比(%)组成。 未列为指令的任何文本将被传递到输出字符串。  
  172.     event.strftime(%W weeks %-d days %-H h %M min %S sec');  
  173.     /*  
  174.         Y: "years",  
  175.         m: "months",  
  176.         n: "daysToMonth",  
  177.         d: "daysToWeek",  
  178.         w: "weeks",  
  179.         W: "weeksToMonth",  
  180.         H: "hours",  
  181.         M: "minutes",  
  182.         S: "seconds",  
  183.         D: "totalDays",  
  184.         I: "totalHours",  
  185.         N: "totalMinutes",  
  186.         T: "totalSeconds"  
  187.      */  
  188.   
  189.     所有的指令,包含0填充(01,02,03)和空白填充'1,2,3'版本,默认是0填充,不需要0填充,使用-%D。  
  190.         -  
  191.   
  192.     模式:  
  193.         -   // 空白填充  
  194.         !   // 多元化复数模式  
  195.             默认:复数添加 's',单数不变  
  196.             %!H         // 当 hour>1,结尾添加 's'  
  197.             %!H:hours   // 当 hour>1,结尾添加 'hours'  
  198.             %!H:hour,hours;     // 当 hour>1,结尾添加 'hours',hour<1,为单数,添加 'hour'。',' 分隔的,前为单数添加的字符,后为复数添加的字符  
  199.   
  200. 5.控制:  
  201.     resume - 恢复  
  202.     pause  - 暂停  
  203.     ------------  
  204.     start  - 开始  
  205.     stop   - 停止  
  206.     pause/resume,本质就是 start/stop 的别名  
  207.     源码分析:  
  208.         pause: function() {  
  209.             this.stop();  
  210.         },  
  211.         resume: function() {  
  212.             this.start();  
  213.         },  
  214.   
  215. 6.countdown插件,本身只做时间的处理,并没做任何时间的默认展示,需要我们自己来做。  
  216.     我们需要做的就是:  
  217.         1.调用countdown(),传递一个 '终止时间'   
  218.         2.绑定countdown相关事件,在事件内,进行我们的展示处理:  
  219.             上面讲了事件的相关内容:  
  220.                 1>3个事件方法:  
  221.                     update.countdown  
  222.                     finish.countdown  
  223.                     stoped.countdown  
  224.                 2>每个事件的额外属性:  
  225.                     event.finalDate = this.finalDate;           // 设定的终止时间  
  226.                     event.elapsed = this.elapsed;               // 是否已经过期  
  227.                     event.offset = $.extend({}, this.offset);   // 当前时间,在各个时间刻度上的计算  
  228.                     event.strftime = strftime(this.offset);     // 格式化时间函数  
  229.     示例:  
  230.         $('#countdown').countdown("2017/5/1")  
  231.         .on('update.countdown', function(){  
  232.             format = "还剩%D天, %H时, %M分, %S秒开始抽奖";            // 指定格式字符串  
  233.             $(this).html(event.strftime(format));               // 将格式字符串,传递给 'event.strftime()' 解析  
  234.         })  
  235.         .on('finish.countdown', function(){  
  236.             $(this).html('开始抽奖');  
  237.         });  

转载地址:http://blog.csdn.net/beyond__devil/article/details/70504654

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值