Countdown Clock

番茄鐘

實作

取得目前時間以及預計時間，兩者相減就可以取得差多少時間，顯示在畫面上

function timer(seconds) {
    clearInterval(countdown);
    const now = Date.now();
    const then = now + seconds * 1000;

    countdown = setInterval(() => {
        const secondsLeft = Math.round((then - Date.now()) / 1000);
        // check if we should stop it
        if (secondsLeft < 0) {
            clearInterval(countdown);
            return;
        }
        displayTimeLeft(secondsLeft);
        displayEndTime(then);
    }, 1000);
}

都會是以毫秒計算，所以要記得做千位數轉換

顯示剩餘的時間

 function displayTimeLeft(seconds) {
     const minutes = Math.floor(seconds / 60);
     const remainderSeconds = seconds % 60;
     const display = `${minutes}:${
         remainderSeconds < 10 ? "0" : ""
     }${remainderSeconds}`;
     timeLeft.textContent = display;
 }

顯示預計回來的時間

 function displayEndTime(timeStamp) {
     const end = new Date(timeStamp);
     const hours = end.getHours();
     const minutes = end.getMinutes();
     const seconds = end.getSeconds();
     const display = `Be back at ${hours > 12 ? hours - 12 : hours}:${
         minutes < 10 ? "0" : ""
     }${minutes}:${seconds < 10 ? "0" : ""}${seconds} ${
         hours > 12 ? "PM" : "AM"
     }`;
     endTime.textContent = display;
 }

監聽自由輸入的表單input

 document.customForm.addEventListener("submit", function (e) {
     e.preventDefault();
     timer(this.minutes.value * 60);
     this.reset();
 });

知識點

HTML中的form標籤是可以直接透過document選取到的，可以直接監聽表單變化

延伸

當以箭頭函數（arrow function）作為 addEventListener 的監聽器（listener）時，會遇到 this 上下文的問題。這是因為箭頭函數具有不同的 this 處理方式，與普通函數不同。

在普通函數中，this 的值是在函數執行時動態決定的，通常取決於誰調用了該函數。當你將函數作為事件監聽器傳遞給 addEventListener 時，this 會自動設定為觸發事件的元素（也就是事件的目標）。這是 JavaScript 事件處理的常見行為。

然而，箭頭函數的 this 並不是動態決定的，而是從它所在的上下文中繼承的。箭頭函數的 this 始終與它所在的上下文相同。如果你在箭頭函數中引用 this，它將引用該箭頭函數所在的上下文，而不是事件目標。

因此，當你使用箭頭函數作為 addEventListener 的監聽器時，this 將不再指向事件目標，而是保持不變，通常會指向 window 或最外層的全域上下文。

為了解決這個問題，你可以使用其他方法，如將 this 的值保存在變數中，然後在箭頭函數中使用該變數。例如：

const myElement = document.getElementById('myElement');

myElement.addEventListener('click', () => {
  // 在這裡使用 myElement 而不是 this
  myElement.style.backgroundColor = 'red';
});

這樣，就可以在箭頭函數中訪問 myElement，而不必擔心 this 的值。