注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

jquery 扩展插件方法  

2017-09-18 09:24:38|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

分析插件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 
16         // trim zero
17         function trimZero(str) {
18             return parseInt(str.replace(/^0/g, ''));
19         }
20         // convert string to time
21         function getDiffTime(str) {
22             var m;
23             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))) {
24                 var year = trimZero(m[1]),
25                     month = trimZero(m[2]) - 1,
26                     day = trimZero(m[3]),
27                     hour = trimZero(m[4]),
28                     minute = trimZero(m[5]),
29                     second = trimZero(m[6]);
30                 return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);
31             }
32             return parseInt(str);
33         }
34         // format time
35         function format(diff) {
36             var tmpl = options.tmpl, day, hour, minute, second;
37             day = /%\{d\}/.test(tmpl) ? Math.floor(diff / 86400) : 0;
38             hour = Math.floor((diff - day * 86400) / 3600);
39             minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);
40             second = diff - day * 86400 - hour * 3600 - minute * 60;
41             tmpl = tmpl.replace(/%\{d\}/ig, day)
42                 .replace(/%\{h\}/ig, hour)
43                 .replace(/%\{m\}/ig, minute)
44                 .replace(/%\{s\}/ig, second);
45             return tmpl;
46         }
47         // main
48         return this.each(function() {
49             var el = this,
50                 diff = getDiffTime($(el).attr(options.attrName));
51             function update() {
52                 if (diff <= 0) {
53                     $(el).html(options.end);
54                     if (options.afterEnd) {
55                         options.afterEnd();
56                     }
57                     return;
58                 }
59                 $(el).html(format(diff));
60                 setTimeout(function() {
61                     diff--;
62                     update();
63                 }, 1000);
64             }
65             update();
66         });
67     };
68 })(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>

复制代码
  评论这张
 
阅读(17)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017