从事前端工作以来，经常用到很多牛人写的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>
以上就是倒计时的实现，功能上是有些单一，但是很是方便灵活。