分析插件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>