分析插件jquery.countdown.js

 (function($) {

     $.fn.countdown = function(options) {

         // default options

         var defaults = {

             attrName : 'data-diff',

             tmpl : '<span class="hour">%{h}</span>小时<span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒',

             end : '已结束',

             afterEnd : null

         };

         console.log(options);

         options = $.extend(defaults, options);

         console.log(options);

         // trim zero

         function trimZero(str) {

             return parseInt(str.replace(/^0/g, ''));

         }

         // convert string to time

         function getDiffTime(str) {

             var m;

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

                 var year = trimZero(m[1]),

                     month = trimZero(m[2]) - 1,

                     day = trimZero(m[3]),

                     hour = trimZero(m[4]),

                     minute = trimZero(m[5]),

                     second = trimZero(m[6]);

                 return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);

             }

             return parseInt(str);

         }

         // format time

         function format(diff) {

             var tmpl = options.tmpl, day, hour, minute, second;

             day = /%\{d\}/.test(tmpl) ? Math.floor(diff / 86400) : 0;

             hour = Math.floor((diff - day * 86400) / 3600);

             minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);

             second = diff - day * 86400 - hour * 3600 - minute * 60;

             tmpl = tmpl.replace(/%\{d\}/ig, day)

                 .replace(/%\{h\}/ig, hour)

                 .replace(/%\{m\}/ig, minute)

                 .replace(/%\{s\}/ig, second);

             return tmpl;

         }

         // main

         return this.each(function() {

             var el = this,

                 diff = getDiffTime($(el).attr(options.attrName));

             function update() {

                 if (diff <= 0) {

                     $(el).html(options.end);

                     if (options.afterEnd) {

                         options.afterEnd();

                     }

                     return;

                 }

                 $(el).html(format(diff));

                 setTimeout(function() {

                     diff--;

                     update();

                 }, 1000);

             }

             update();

         });

     };

 })(jQuery);
1、$.fn.countdown 为扩展jquery方法，函数名为countdown
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里的键值对提供属性，相当于类里成员函数的参数。

4、options = $.extend(defaults, options); 将options值合并到defaults，并返回合并结果
5、return this.each(function() );  获取网页的的id或name值的并修改的函数操作

网页调用样例:
<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Countdown Demo</title>

        <style>

        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script src="jquery.countdown.js"></script>

        <script>

            $(function() {

                $('.J_countdown1').countdown();

                $('.J_countdown2').countdown({

                    tmpl : '<span>%{d}</span>天<span>%{h}</span>小时<span>%{m}</span>分<span>%{s}</span>秒'

                });

                $('.J_countdown3').countdown({

                    tmpl : '<span>%{d}</span>天, <span>%{h}</span>小时, <span>%{m}</span>分, <span>%{s}</span>秒'

                });

            });

        </script>

    </head>

    <body>

        <div class="J_countdown1" data-diff="10"></div>

        <div class="J_countdown1" data-diff="70"></div>

        <div class="J_countdown1" data-diff="3610"></div>

        <div class="J_countdown1" data-diff="86410"></div>

        <div class="J_countdown2" data-diff="21234567890"></div>

        <div class="J_countdown3" data-diff="21234567890"></div>

    </body>

</html>
 
												


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

    
								
  1. jQuery扩展插件以及正则相关函数练习
		
    一.jQuery扩展插件 二.相关正则函数:
    
		
    2. 
						
  2. JQuery扩展插件Validate—5添加自定义验证方法
		
    从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,下面的示例中添加了一个 ...
    
		
    3. 
						
  3. Angular TypeScript开发环境集成jQuery扩展插件
		
    集成步骤: 1.安装jquery极其扩展插件库ts定义文件 npm install jquery --save npm install --save-dev @types/jquery npm ins ...
    
		
    4. 
						
  4. jQuery扩展插件
		
    jQuery有多好用,大家有目共睹的,但是有时候不是每个功能都是万能的,有时候我们需要实现自己的功能,jQuery提供了很好的拓展功能,我们可以去拓展插件,更好的利用jQuery 查看官网,可知,有两 ...
    
		
    5. 
						
  5. jQuery扩展插件和拓展函数的写法
		
    <script type="text/JavaScript">            //jQuery插件的写法(需要传入操作对象)        ;(function ...
    
		
    6. 
						
  6. jQuery扩展工具方法
		
    共享学习Jquery源码的一些东西 jQuery.extend({   expando  :  生成唯一JQ字符串(内部) noConflict()  :  防止冲突 ---------------- ...
    
		
    7. 
						
  7. jquery扩展插件，让demo元素也可以resize
		
    (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout&q ...
    
		
    8. 
						
  8. jquery编写插件的方法
		
     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
    
		
    9. 
						
  9. 再谈：jquery编写插件的方法
		
    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 我觉得有意思的JavaScript题目（01-05更新中）
			
    对于以下js题目均来至于网络中.有的来至于文章之中,有的也许来至于问答题型中.如果您有更好的问题解释,请留言交流! 1.相关问题描述:到底该怎么去理解闭包? 代码片段A !function(){ va ...
    
			
    2. 
						
  2. COGS130. [USACO Mar08] 游荡的奶牛[DP]
			
    130. [USACO Mar08] 游荡的奶牛 ★☆   输入文件:ctravel.in   输出文件:ctravel.out   简单对比时间限制:1 s   内存限制:128 MB 奶牛们在被划 ...
    
			
    3. 
						
  3. 便捷的方式在手机上查看Unity3D的Console Log(调试信息)
			
    Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itsel ...
    
			
    4. 
						
  4. angular中自定义依赖注入的方法和decorator修饰
			
    自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...
    
			
    5. 
						
  5. Java 8新特性终极指南
			
    目录结构 介绍 Java语言的新特性 2.1 Lambdas表达式与Functional接口 2.2 接口的默认与静态方法 2.3 方法引用 2.4 重复注解 2.5 更好的类型推测机制 2.6 扩展 ...
    
			
    6. 
						
  6. bzoj3731: Gty的超级妹子树
			
    一代神题啊orz(至少是以前年代的神题吧) 块状树 复杂度nsqrtnlogn 真是exciting 还没有卡时限 话不多说直接上代码 (最近解锁了记事本写代码的技能...感觉越来越依赖OJ调试了.. ...
    
			
    7. 
						
  7. cocos2d-x打飞机实例总结
			
    写了一个cocos2d-x的打飞机游戏,为了深入了解,准备进入引擎内部,深入分析一下打飞机,顺便梳理一下相关的知识 打算分为几个部分: 1.程序入口和场景切换模块分析:简单了解HelloWorld怎样 ...
    
			
    8. 
						
  8. BZOJ 3224: Tyvj 1728 普通平衡树
			
    3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 9629  Solved: 4091[Submit][Sta ...
    
			
    9. 
						
  9. MySQL二进制安装
			
    前提 version mysql-5.5 platform centos6.x 添加用户 useradd -M -s /sbin/nologin mysql 安装需要的包 yum -y install ...
    
			
    10. 
						
  10. html5离线应用和缓存
			
    1 localstorage和sessionstorage sessionStrage: session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,se ...
    
			
    11.