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 : '<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>
复制代码

 

 


posted @   cogitoergosum  阅读(3986)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手