從事前端工作以來，經常用到很多牛人寫的javascript的庫和插件。很是羡慕他們的能力，
自己也是以他們這些能人為目標不斷努力。自己一直以來都想寫一個自己的js庫，再封裝一
些自己常用插件，想法是美麗動人的，現實是自己一直都還沒一個很好的行動。
很多人的想法是很豐富的，東南西北的亂想，但是能把想的轉化成現實的，就是很少。而往往
想與行動結合才是學習提升的重點。自個為了能讓自己的js庫能夠早日出爐，已經把大概的
js庫模樣構思出來啦，代碼已提交到https://github.com/qiheng/baseLib，歡迎大家留言
建議。我的現在的想法就是利用自己編寫的js庫，擴展一些常用的js插件，比如我今天要說
的倒計時的小插件。但是今天說的倒計時小插件還沒結合自己編寫的js庫，那個js庫的還有
很多的問題存在，因此不便結合它來編寫插件。
現在來說說倒計時的插件吧，我是把它封裝成一個構造函數TimeCountDown，daima如下：
/* * 倒計時 ( TimeCountDown ) 封裝類 * @param { String } 類的屬性 傳入的結束時間 */ function TimeCountDown( strTime ) { if ( this instanceof TimeCountDown ) { this.strTime = strTime; }else { return new TimeCountDown(); } }
在這個構造函數有個strTime屬性，是要傳入的結束時間字符串。
下面是構造函數的一個原型鏈方法fillZero，這個函數從名字上就知道是作用，就是
在不足長度的字符串的前面添加0，有兩個參數，第一個是要傳入補零的參數，第二個是補
零后的字符串長度，代碼如下：
/* * @method fillZero 類的方法 倒計時的輔助函數，對時間格式化，不足位數填零(如:8:12:5--->08:12:05) * @paran { Number } 傳入要格式的時間 * @return { String } 返回格式的時間字符串 */ TimeCountDown.prototype.fillZero = function( num, digit ) { var str = '' + num; digit = digit || 2; while ( str.length < digit ) { str = '0' + str; } return str; }
現在是倒計時的關鍵代碼，先看代碼：
/* * @method time 類的方法 倒計時的核心功能函數 * @return { Object || null } 返回時間,傳入的時間結束啦則返回null */ TimeCountDown.prototype.time = function() { var aTimes = [], oResult = {}, oDateEnd = null, oDateNow = null, iTimes = 0; aTimes = this.strTime.split(/[-:]|\s/g); oDateEnd = new Date( aTimes[0], aTimes[1] - 1, aTimes[2] || 1, aTimes[3] || 0, aTimes[4] || 0, aTimes[5] || 0 ); oDateNow = new Date(); iTimes = ( oDateEnd.getTime() - oDateNow.getTime() ) / 1000; // 總的秒數 oDateNow = oDateEnd = null; if ( iTimes < 0 ) { return null; } oResult.nowDays = parseInt( iTimes / 86400 ); // 天 iTimes = iTimes % 86400; oResult.nowHours = parseInt( iTimes / 3600 ); // 時 iTimes = iTimes % 3600; oResult.nowMinutes = parseInt( iTimes / 60 ); // 時 iTimes = iTimes % 60 oResult.nowSeConds = parseInt( iTimes ); // 秒 return oResult; }
這個代碼里處理的時間格式比較單一，如“2013-11-22”，
“2013-11-22 12:1:45”，如果傳入的時間是結束了就返回null，如果有就返回一個對象
倒計時的運用一 希望時間格式為 xxx-xx-xx-xx 就是用實例化的fillZero方法，默認為填充兩位
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 倒計時 </title> <style type="text/css"> * {margin:0; padding:0;} #clock {margin:50px; text-align:center; font:700 40px "Microsoft Yahei"} </style> </head> <body> <div id="clock"> <span id="days">0</span> : <span id="hours">0</span> : <span id="minutes">0</span> : <span id="seconds">0</span> </div> <script type="text/javascript"> function $( id ) { return typeof id === 'string' ? document.getElementById( id ) : id; } var oDays = $('days'); var oHours = $('hours'); var oMinutes = $('minutes'); var oSeconds = $('seconds'); function autoPlay() { var showTime = new TimeCountDown('2013-11-22'); var timeId = setInterval(function(){ var t = showTime.time(); if (t) { oDays.innerHTML = showTime.fillZero( t.nowDays, 3 ); oHours.innerHTML = showTime.fillZero( t.nowHours ); oMinutes.innerHTML = showTime.fillZero( t.nowMinutes ); oSeconds.innerHTML = showTime.fillZero( t.nowSeConds ); }else { showTime = null; clearInterval( timeId ); oDays.style.color = 'red'; } }, 1000); } autoPlay(); </script> </body> </html>
倒計時的運用二 希望時間格式為 xxx-xx-xx-xx 就是用實例化的fillZero方法，默認為填充兩位；卻希望每個時間數為各位，只需要將返回的時間用原生split函數進行分割處理
這樣就可以利用圖片作為時間數值進行時間顯示。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 倒計時 </title> <style type="text/css"> * {margin:0; padding:0;} #clock {margin:50px; text-align:center; font:700 40px "Microsoft Yahei"} </style> </head> <body> <div id="clock"> <span id="days">0</span> : <span id="hours">0</span> : <span id="minutes">0</span> : <span id="seconds">0</span> </div> <script type="text/javascript"> function $( id ) { return typeof id === 'string' ? document.getElementById( id ) : id; } var oDays = $('days'); var oHours = $('hours'); var oMinutes = $('minutes'); var oSeconds = $('seconds'); function autoPlay() { var showTime = new TimeCountDown('2013-11-22'); var timeId = setInterval(function(){ var t = showTime.time(); if (t) { oDays.innerHTML = showTime.fillZero( t.nowDays, 3 ).split(''); oHours.innerHTML = showTime.fillZero( t.nowHours ).split(''); oMinutes.innerHTML = showTime.fillZero( t.nowMinutes ).split(''); oSeconds.innerHTML = showTime.fillZero( t.nowSeConds ).split(''); }else { showTime = null; clearInterval( timeId ); } }, 1000); } autoPlay(); </script> </body> </html>
以上就是倒計時的實現，功能上是有些單一，但是很是方便靈活。