一、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);

這段實例代碼所產生的效果如下所示：06時?20分?11秒

如果現在還沒有到2030年，則您應該可以看到上面秒前面的數值在不停的倒計時。

需要注意的是，參數2的對象集不支持jQuery對象，只能是DOM對象，如果您需要支持jQuery對象，需要修改原js方法中的innerHTML為jQuery的html()或是text()方法。

最后，提供下js腳本的下載，您可以狠狠地點擊這里：timeCountDown.js(1.75K, 右鍵 – [目標|鏈接]另存為)

三、簡短的結語

此腳本只是簡單測試了下，且js功力尚淺，難免還存有bug或是不準確之處。如果您發現了，歡迎指正，不甚感謝。也歡迎各種形式的討論與交流。

轉自張鑫旭-鑫空間-鑫生活
原文地址：http://www.zhangxinxu.com/wordpress/?p=987

總結

以上是生活随笔為你收集整理的js实现倒计时 类似团购网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。