分析插件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. H5框架之Bootstrap（二）
			
    H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...
    
			
    2. 
						
  2. Linux下基于vsftpd搭建ftp服务器
			
    1.先用检查是否已经安装rpm -qa| grep vsftpd2.然后再进行在线安装vsftpd这个服务yum install vsftpd -y3.修改vi /etc/vsftpd/vsftpd. ...
    
			
    3. 
						
  3. C# 读取EXCEL文件的三种经典方法
			
    1.方法一:采用OleDB读取EXCEL文件: 把EXCEL文件当做一个数据源来进行数据的读取操作,实例如下: public DataSet ExcelToDS(string Path) { stri ...
    
			
    4. 
						
  4. JQUERY获取当前页面的URL信息
			
    以前在做网站的时候,经常会遇到当前页的分类高亮显示,以便让用户了解当前处于哪个页面.之前一直是在每个不 同页面写方法.工程量大,也不便于修改.一直在想有什么简便的方法实现.后来在网上查到可以用获取当前 ...
    
			
    5. 
						
  5. HiKariCP的数据源配置
			
    <!-- Hikari Datasource --> <bean id="dataSourceHikari" class="com.zaxxer.hik ...
    
			
    6. 
						
  6. C#软件设计——小话设计模式原则之：接口隔离原则ISP
			
    前言:有朋友问我,设计模式原则这些东西在园子里都讨论烂了,一搜一大把的资料,还花这么大力气去整这个干嘛.博主不得不承认,园子里确实很多这方面的文章,并且不乏出色的博文.博主的想法是,既然要完善知识体系 ...
    
			
    7. 
						
  7. 微信快速开发框架（九）-- V3.0发布，代码已更新至Github 新增微店功能
			
    版本内容 1.修正了缺少对Event.View的支持 2.增加了用户UnionID 3.新增微信小店功能 4.多客服功能 5.单元测试 什么是UnionID 我们知道,每个用户针对一个微信公众账号都有 ...
    
			
    8. 
						
  8. 菜鸟初识python request属性及方法说明
			
    if  request.REQUEST.has_key('键值'): HttpRequest对象的属性 参考: 表 H-1. HttpRequest对象的属性 属性 描述 path 表示提交请求页面完 ...
    
			
    9. 
						
  9. 【caffe】绘制网络结构图
			
    @tags caffe 网络结构 可视化 当拿到一份网络定义文件net.prototxt,可以用工具画出网络结构.最快速的方法是使用在线工具netscope,粘贴内容后shift+回车就可以看结果了. ...
    
			
    10. 
						
  10. System.Diagnostics.Process.Star的用法
			
    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...
    
			
    11.