jquery 扩展插件方法

分析插件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 : '%{h}小时%{m}分钟%{s}秒',
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>