by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=987
一、如火如荼的團購網站
根據易觀國際提供的統計數據，截至2010年6月，中國市場團購網站數量已經突破400家。國內團購潮從今年2月份開始出現，在4~6月出現高峰，尤其是今年5月，一些大的網站如愛幫網、開心網都加入到團購中來，F團、團寶、酷團、515團購、1288團購、拉手、24券、滿座、窩窩、滿堂網、糯米網、第一團購等也紛紛上線。預計年底，我國團購類網站的數量將達到1000多家，甚至有業內人士稱“一天之內會有三到五家新的團購網站誕生”。俗稱“千團大戰”。
據說王興的美團網上線4個月就盈虧平衡了，還有，貌似企鵝、點評也來插足了。
不過這類團購網站是死是活、孰好孰壞不管我鳥事，我所關心的是一些讓我感興趣的前端內容，比如說，這類團購網站的倒計時。
雖然有的橫著睡覺，有的豎著休息，本質上都是一樣的，一樣的阿拉伯數字，一樣的一秒一變化。本文內容就是展示如何在前端使用js實現倒計時的UI效果。
二、demo與效果展示
為節約時間，我就直接套用了企鵝團的界面作為demo的背景。因為是倒計時，所以需要一個固定的時間，為了n年后，某位仁兄打開demo頁面依然在倒計時，所以我把倒計時時間設成了2050年7月30日中午12點整，還有40年才到，因為年代較長，所以有必要顯示剩余年份與月份。所以，最后demo頁面的效果如下圖所示：
您可以狠狠地點擊這里：團購倒計時demo
三、使用
倒計時其實就是Date類的一些計算與處理，主要是些繁瑣的工作。為了省掉他人的功夫以及方便后來的使用，我已經將倒計時主要處理方法封裝起來了。方法名為：fnTimeCountDown(參數1, 參數2)。
具體使用如下，首先，調用倒計時js腳本，您可以在頁面的任何位置嵌入這段腳本：
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/timeCountDown.js"></script>
然后，調用方法fnTimeCountDown(參數1, 參數2)即可，于是就可以實現倒計時效果了，很簡單吧。
下面是重點了，就是關于這里的參數。參數1指的是截止的時間。我個人建議使用UTC()方法創建Date對象傳遞給Date構造函數。例如，Date.UTC(2030, 6, 27, 16, 34)，表示的就是2030年7月27日161時34分0秒（月份需要加1），然后將這個參數替換“參數1”就可以了。具體來說就是：
var d = Date.UTC(2030, 6, 27, 16, 34);fnTimeCountDown(d, 參數2)
關于參數2，有點小復雜。參數2是個對象，同時也是個對象集，是顯示秒、分、時數值標簽的DOM對象集合，里面的對象名是固定的，不可自己定義，否則沒有效果的。考慮到擴展性，對象名從秒一直到年，具體如下：
{sec: 顯示秒數值的標簽對象,mini: 顯示分鐘數值的標簽對象,hour: 顯示小時數值的標簽對象,day: 顯示天數數值的標簽對象,month: 顯示月份數值的標簽對象,year: 顯示年數數值的標簽對象}以上所有的參數都是可選的，如果哪個參數沒有，則不顯示時間變化，如果參數對應的DOM對象不存在，自然也沒有數值變化的。如果是上面部分展示的團購倒計時的話，只要下面三個子對象就足夠了：
{sec: 顯示秒數值的標簽對象,mini: 顯示分鐘數值的標簽對象,hour: 顯示小時數值的標簽對象}舉個例子吧，有三個標簽，分別用來顯示剩余的小時數，分鐘數以及秒數的，其id分別是hour,mini,sec，如下所示：
<span id="hour"></span>時 <span id="mini"></span>分 <span id="sec"></span>秒
則第二個參數應該這么寫：
var obj = {sec: document.getElementById("sec"),mini: document.getElementById("mini"),hour: document.getElementById("hour")}所以兩個參數合起來就是：
var d = Date.UTC(2030, 6, 27, 16, 34);var obj = {sec: document.getElementById("sec"),mini: document.getElementById("mini"),hour: document.getElementById("hour")}fnTimeCountDown(d, obj);這段實例代碼所產生的效果如下所示：
04時 58分 54秒
如果現在還沒有到2030年，則您應該可以看到上面秒前面的數值在不停的倒計時。
需要注意的是，參數2的對象集不支持jQuery對象，只能是DOM對象，如果您需要支持jQuery對象，需要修改原js方法中的innerHTML為jQuery的html()或是text()方法。
最后，提供下js腳本的下載，您可以狠狠地點擊這里：timeCountDown.js(1.75K, 右鍵 – [目標|鏈接]另存為)
四、簡短的結語
此腳本只是個人簡單測試了下，且js功力尚淺，難免還存有bug或是不準確之處。如果您發現了，歡迎指正，不甚感謝。也歡迎各種形式的討論與交流。
