首页 > 代码库 > jquery 扩展插件方法
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 zero17 function trimZero(str) {18 return parseInt(str.replace(/^0/g, ‘‘));19 }20 // convert string to time21 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 time35 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 // main48 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>
jquery 扩展插件方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。