JS實現倒計時功能

本範例利用 JavaScript 設計一個倒計時顯示牌，實現方法：用結束時間減去現在時，獲取時間差，再利用數學方法從時間差中分別獲取日，時、分、秒等資訊，最後通過定時器設定每秒執行一次，實現實時更新。

【操作步驟】

1) 使用 new Date() 獲取當前時間，使用 new 呼叫一個帶有引數的 Date 物件，定義結束的時間，endtime=new Date(2020/8/8)。使用 getTime() 方法獲取現在時和結束時距離 1970 年 1 月 1 日的毫秒數。然後，求兩個時間差。

把時間差轉換為天數、小時數、分鐘數和秒數顯示。主要是用%取模運算。得到距離結束時間的毫秒數（剩餘毫秒數），除以 1000 得到剩餘秒數，再除以 60 得到剩餘分鐘數，再除以 60 得到剩餘小時數。除以 24 得到剩餘天數。剩餘秒數 lefttime/1000 模 60 得到秒數，剩餘分鐘數 lefttime/(1000 * 60) 模 60 得到分鐘數，剩餘小時數 lefttime/(1000 * 60 * 60) 模 24 得到小時數。

完整程式碼如下：

var showtime = function () {
    var nowtime = new Date(),  //獲取當前時間
        endtime = new Date("2020/8/8");  //定義結束時間
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距離結束時間的毫秒數
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //計算天數
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //計算小時數
        leftm = Math.floor(lefttime/(1000*60)%60),  //計算分鐘數
        lefts = Math.floor(lefttime/1000%60);  //計算秒數
    return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒計時的字串
}

2) 使用定時器設計每秒鐘呼叫倒計時函數一次。

var div = document.getElementById("showtime");
setInterval (function () {
    div.innerHTML = showtime();
}, 1000);  //反復執行函數本身

顯示結果如下：

---