Javascript之實現頁面倒計時效果

本文將從需求實現的角度，逐步講解如何在頁面上實現倒計時效果，其中部分涉及到的知識會做拓展講解，最后將所有代碼封裝，適用於不同情況下倒計時功能的實現。

---

效果圖

---

一、分析需求

要實現倒計時效果，可拆解為以下三個部分進而逐個擊破：

1、 使用Date方法計算對應倒計時的數據並返回
2、 利用DOM操作將得到的數據渲染到頁面中
3、 通過JavaScript原生API（setInterval或setTimeout）實現倒計時效果

---

二、代碼實現

1、 使用Date方法計算對應倒計時的數據並返回

類型1：傳入具體時間對象，如2020/12/31 到 當前時間 的倒計時

function countDown(){
	// 創建目標時間對象
    var target_time = new Date("2020/12/31");
    // 計算目標時間對象到當前時間的毫秒數
    var reduce_ms = target_time.getTime() - Date.now(); 
    // 返回需要的數據
    return {
        day  : parseInt(reduce_ms / 1000 / 3600 / 24),
        hour : parseInt(reduce_ms / 1000 / 3600 % 24),
        min  : parseInt(reduce_ms / 1000 / 60 % 60 ),
        sec  : Math.round(reduce_ms / 1000 % 60)
    }
}

類型2：傳入需要倒計時的具體時間，如5小時倒計時

function countDown(){
    var target_time = new Date();
    // 獲取當前時間5小時后的目標時間對象
    target_time.setHours(target_time.getHours() + 5);
    // 計算目標時間對象到當前時間的毫秒數
    var reduce_ms = target_time.getTime() - Date.now(); 
    // 返回需要的數據
    return {
        day  : parseInt(reduce_ms / 1000 / 3600 / 24),
        hour : parseInt(reduce_ms / 1000 / 3600 % 24),
        min  : parseInt(reduce_ms / 1000 / 60 % 60 ),
        sec  : Math.round(reduce_ms / 1000 % 60)
    }
}

問：為何要以對象的形式返回數據？
答：便於后續提取需要的數據渲染到頁面中

2、 利用DOM操作將得到的數據渲染到頁面中

步驟1：向HTML寫入對應節點，此操作可通過 innerHTML 實現
* 為方便理解本文直接手動寫入

<p>
    倒計時 : 
    <span id="day"></span>天
    <span id="hour"></span>小時
    <span id="min"></span>分鍾
    <span id="sec"></span>秒
</p>

步驟2：將數據插入到HTML結構的對應位置

// 獲取需要對應插入數據的節點
var day_ele = document.getElementById("day");
var hour_ele = document.getElementById("hour");
var min_ele = document.getElementById("min");
var sec_ele = document.getElementById("sec");

// 封裝函數，當數值小於10時在前面加“0”
function addZero( num ){
    if(num < 10){
        return "0" + num;
    }
    return num;
}

// 將數據渲染到頁面指定節點中
function renderCountDown(){
    var res = countDown();
    day_ele.innerHTML = addZero(res.day);
    hour_ele.innerHTML = addZero(res.hour);
    min_ele.innerHTML  = addZero(res.min);
    sec_ele.innerHTML  = addZero(res.sec);
}

3、 通過JavaScript原生API（setInterval或setTimeout）實現倒計時效果

setInterval() 與 setTimeout() 都能實現頁面倒計時，其區別在於：
setInterval() ：每指定間隔時間后執行一次傳入的函數，函數會多次執行
setTimeout() ：等待指定時間后執行傳入的函數，且只執行一次

方法1：使用setInterval()

setInterval(function(){
    renderCountDown();
},1000);
// 可簡寫為下面這種形式
// setInterval(renderCountDown,1000);

renderCountDown()

方法2：使用setTimeout()

function renderCountDown(){
    var res = countDown();
    hour_ele.innerHTML = addZero(res.hour);
    min_ele.innerHTML  = addZero(res.min);
    sec_ele.innerHTML  = addZero(res.sec);
    setTimeout(renderCountDown, 1000);
}
renderCountDown()

注意：setTimeout()只會執行一次傳入的函數。故需要將其放入到渲染函數的內部，從而實現循環調用（類似於遞歸思想）。

---

三、代碼封裝

<p>
    倒計時 : 
    <span id="day"></span>天
    <span id="hour"></span>小時
    <span id="min"></span>分鍾
    <span id="sec"></span>秒
</p>
<script>
	// 設置變量（不同的時間傳入方式）
	var target_time = new Date("2020/12/31");
	// var target_time = new Date();
	// target_time.setHours(target_time.getHours() + 5);
	
	// 獲取需要對應插入數據的節點
	var day_ele = document.getElementById("day");
	var hour_ele = document.getElementById("hour");
	var min_ele = document.getElementById("min");
	var sec_ele = document.getElementById("sec");
	
	// 獲取目標時間到當前時間的毫秒數，進行計算並返回結果
	function countDown(){
	    var reduce_ms = target_time.getTime() - Date.now(); 
	    return {
	    	day  : parseInt(reduce_ms / 1000 / 3600 / 24),
	        hour : parseInt(reduce_ms / 1000 / 3600),
	        min  : parseInt(reduce_ms / 1000 / 60 % 60 ),
	        sec  : Math.round(reduce_ms / 1000 % 60)
	    }
	}
	
	// 將數據渲染到頁面指定節點中
	function renderCountDown(){
	    var res = countDown();
	    day_ele.innerHTML = addZero(res.day);
	    hour_ele.innerHTML = addZero(res.hour);
	    min_ele.innerHTML  = addZero(res.min);
	    sec_ele.innerHTML  = addZero(res.sec);
	}
	
	// 封裝函數，當數值小於10時在前面加“0”
	function addZero( num ){
	    if(num < 10){
	        return "0" + num;
	    }
	    return num;
	}
	
	// 實現倒計時效果
	setTimeout(renderCountDown,1000);
	renderCountDown()
</script>