Countdown Timer

JavaScript重點

  1. 取得Deadline與1970/01/01的時間差

    1
    const futureTime = futureDate.getTime();
    • Date.getTime()可以計算該Date物件離1970/01/01的毫秒數

  2. 新增getRemaindingTime()函數

    1
    2
    3
    function getRemaindingTime() {
        //內容...
    }
    • 以下程式碼皆在getRemaindingTime()函數內

  3. 取得當前時間與1970/01/01的時間差

    1
    const today = new Date().getTime();

  4. 計算當前時間與Deadline的時間差

    1
    const t = futureTime - today;

  5. 計算一天、一小時與一分鐘的毫秒數

    1
    2
    3
    const oneDay = 24 * 60 * 60 * 1000;
    const oneHour = 60 * 60 * 1000;
    const oneMinute = 60 * 1000;

  6. 將時間毫秒差轉換成天數、小時數、分鐘數與秒數

    1
    2
    3
    4
    let days = Math.floor(t / oneDay); //計算天數
    let hours = Math.floor((t % oneDay) / oneHour); //計算小時數
    let minutes = Math.floor((t % oneHour) / oneMinute); //分鐘數
    let seconds = Math.floor((t % oneMinute) / 1000); //秒數

  7. 將以上記錄存進value陣列中

    1
    const values = [days, hours, minutes, seconds];

  8. 新增format()函數 : 將value中只有個位數的元素補0

    1
    2
    3
    4
    5
    6
    function format(item) {
        if (item < 10) {
          return (item = `0${item}`);
        }
        return item;
    };

  9. 將value中的數值丟進個別時間單位DIV中

    1
    2
    3
    items.forEach(function (item, index) {
        item.innerHTML = format(values[index]);
    });

  10. (回到最外層)新增重複執行的函數

    1
    let countdown = setInterval(getRemaindingTime, 1000);
    • setInterval(func, [delay])用法 :
      • 功能 : 每隔指定的毫秒數迴圈呼叫函式或表示式
      • func : 被執行的函式
      • [delay] : 延遲的時間(毫秒數)
      • setTimeout()的功能也相當類似。但setInterval()會重複執行；而setTimeout()只會執行一次

  11. 將下列程式碼加進getRemaindingTime()中，設定當倒數時間歸零後顯示的文字

    1
    2
    3
    4
    if (t < 0) {
        clearInterval(countdown); //結束countdown
        deadline.innerHTML = `<h4 class="expired">sorry, this giveaway has expired!</h4>`;
    }
    • clearInterval可以用來取消setInterval()

參考與引用來源

  1. getTime()介紹
  2. setTimeout()與setInterval()的差異