分析插件jquery.countdown.js

  1.  (function($) {
  2.      $.fn.countdown = function(options) {
  3.          // default options
  4.          var defaults = {
  5.              attrName : 'data-diff',
  6.              tmpl : '<span class="hour">%{h}</span>小时<span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒',
  7.              end : '已结束',
  8.              afterEnd : null
  9.          };
  10.  
  11.          console.log(options);
  12.          options = $.extend(defaults, options);
  13.          console.log(options);
  14.  
  15.          // trim zero
  16.          function trimZero(str) {
  17.              return parseInt(str.replace(/^0/g, ''));
  18.          }
  19.          // convert string to time
  20.          function getDiffTime(str) {
  21.              var m;
  22.              if ((m = /^(\d{4})[^\d]+(\d{1,2})[^\d]+(\d{1,2})\s+(\d{2})[^\d]+(\d{1,2})[^\d]+(\d{1,2})$/.exec(str))) {
  23.                  var year = trimZero(m[1]),
  24.                      month = trimZero(m[2]) - 1,
  25.                      day = trimZero(m[3]),
  26.                      hour = trimZero(m[4]),
  27.                      minute = trimZero(m[5]),
  28.                      second = trimZero(m[6]);
  29.                  return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);
  30.              }
  31.              return parseInt(str);
  32.          }
  33.          // format time
  34.          function format(diff) {
  35.              var tmpl = options.tmpl, day, hour, minute, second;
  36.              day = /%\{d\}/.test(tmpl) ? Math.floor(diff / 86400) : 0;
  37.              hour = Math.floor((diff - day * 86400) / 3600);
  38.              minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);
  39.              second = diff - day * 86400 - hour * 3600 - minute * 60;
  40.              tmpl = tmpl.replace(/%\{d\}/ig, day)
  41.                  .replace(/%\{h\}/ig, hour)
  42.                  .replace(/%\{m\}/ig, minute)
  43.                  .replace(/%\{s\}/ig, second);
  44.              return tmpl;
  45.          }
  46.          // main
  47.          return this.each(function() {
  48.              var el = this,
  49.                  diff = getDiffTime($(el).attr(options.attrName));
  50.              function update() {
  51.                  if (diff <= 0) {
  52.                      $(el).html(options.end);
  53.                      if (options.afterEnd) {
  54.                          options.afterEnd();
  55.                      }
  56.                      return;
  57.                  }
  58.                  $(el).html(format(diff));
  59.                  setTimeout(function() {
  60.                      diff--;
  61.                      update();
  62.                  }, 1000);
  63.              }
  64.              update();
  65.          });
  66.      };
  67.  })(jQuery);
  1. 1、$.fn.countdown 为扩展jquery方法，函数名为countdown
  1. 2、 var defaults 相当于类里成员变量，

3、defaults = {
attrName : 'data-diff',
tmpl : '<span class="hour">%{h}</span>小时<span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒',
end : '已结束',
afterEnd : null
};

defaluts里的键值对提供属性，相当于类里成员函数的参数。

  1. 4、options = $.extend(defaults, options); 将options值合并到defaults，并返回合并结果
  1. 5、return this.each(function() );  获取网页的的id或name值的并修改的函数操作
  2.  
  3. 网页调用样例:
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Countdown Demo</title>
  6.         <style>
  7.         </style>
  8.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  9.         <script src="jquery.countdown.js"></script>
  10.         <script>
  11.             $(function() {
  12.                 $('.J_countdown1').countdown();
  13.                 $('.J_countdown2').countdown({
  14.                     tmpl : '<span>%{d}</span>天<span>%{h}</span>小时<span>%{m}</span>分<span>%{s}</span>秒'
  15.                 });
  16.                 $('.J_countdown3').countdown({
  17.                     tmpl : '<span>%{d}</span>天, <span>%{h}</span>小时, <span>%{m}</span>分, <span>%{s}</span>秒'
  18.                 });
  19.             });
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <div class="J_countdown1" data-diff="10"></div>
  24.         <div class="J_countdown1" data-diff="70"></div>
  25.         <div class="J_countdown1" data-diff="3610"></div>
  26.         <div class="J_countdown1" data-diff="86410"></div>
  27.         <div class="J_countdown2" data-diff="21234567890"></div>
  28.         <div class="J_countdown3" data-diff="21234567890"></div>
  29.     </body>
  30. </html>
  1.  
  1.  

jquery 扩展插件方法的更多相关文章

  1. jQuery扩展插件以及正则相关函数练习

    一.jQuery扩展插件 二.相关正则函数:

  2. JQuery扩展插件Validate—5添加自定义验证方法

    从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,下面的示例中添加了一个 ...

  3. Angular TypeScript开发环境集成jQuery扩展插件

    集成步骤: 1.安装jquery极其扩展插件库ts定义文件 npm install jquery --save npm install --save-dev @types/jquery npm ins ...

  4. jQuery扩展插件

    jQuery有多好用,大家有目共睹的,但是有时候不是每个功能都是万能的,有时候我们需要实现自己的功能,jQuery提供了很好的拓展功能,我们可以去拓展插件,更好的利用jQuery 查看官网,可知,有两 ...

  5. jQuery扩展插件和拓展函数的写法

    <script type="text/JavaScript">            //jQuery插件的写法(需要传入操作对象)        ;(function ...

  6. jQuery扩展工具方法

    共享学习Jquery源码的一些东西 jQuery.extend({   expando  :  生成唯一JQ字符串(内部) noConflict()  :  防止冲突 ---------------- ...

  7. jquery扩展插件，让demo元素也可以resize

    (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout&q ...

  8. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  9. 再谈：jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

随机推荐

  1. UI自动化，你值得拥有

    去年春节联欢晚会,为了那张“敬业福”,全家都卯足了劲儿“咻一咻”,连节目都顾不上看了.当时我就想,要是能自动化该多好,不停点击屏幕,屏幕不疼手还疼呢,何况还不好分心,生怕错过了“敬业福”.玩“咻一咻” ...

  2. Nim游戏

    目前有3堆石子,每堆石子个数也是任意的,双方轮流从中取出石子,规则如下:1)每一步应取走至少一枚石子:每一步只能从某一堆中取走部分或全部石子:2)如果谁不能取谁就失败. Bouton定理: 必败状态当 ...

  3. Vc6.0头文件的定义

    Vc6.0头文件的定义 #ifndef __HEADER__ #define __HEADER__ int fun(int i); #endif

  4. 三种方法查看MySQL数据库的版本

    1.使用-V参数 首先我们想到的肯定就是查看版本号的参数命令,参数为-V(大写字母)或者--version 使用方法: D:\xampp\mysql\bin>mysql -V 或者 D:\xam ...

  5. SQLserver中用convert函数转换日期格式

    SQLserver中用convert函数转换日期格式 2008-01-23 15:47 SQLserver中用convert函数转换日期格式2008-01-15 15:51SQLserver中用con ...

  6. 对.net技术组件的分析和选择

    .net很庞杂,学习最忌讳什么?为了学而学,而不是为了用而学.我们不是为了成为教师,所以不要成为书呆子,不要成为"博士",要从庞杂的技术群中选择自己需要的内容进行学习. 如果不加选 ...

  7. RapidJSON 代码剖析（一）：混合任意类型的堆栈

    大家好,这个专栏会分析 RapidJSON (中文使用手册)中一些有趣的 C++ 代码,希望对读者有所裨益. C++ 语法解说 我们先来看一行代码(document.h): bool StartArr ...

  8. pyhton 学习

    官方学习文档 https://docs.python.org/3/tutorial/

  9. 线段树 poj 2991

    我们只要把这些向量求和,最终所指的位置就是终点,因此我们只要维护好向量的区间和就可以了.对于第二个问题,我们可以用一个数组degree[i]表示第i个向量和第i-1一个向量当前的夹角,这样就有了当前的 ...

  10. Adapter的封装之路

    原文:Adapter的封装之路 一.几种常见列表效果: 假如要用RecyclerView实现下面的几种效果,你会如何实现呢? 效果1:单布局效果   效果2:多布局效果 有多种Item布局   效果3 ...