目標

今天要來做的是倒數計時器

Step1

let countdown;

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

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

function displayTimeLeft(seconds) {
    console.log(seconds);
}

今天先不選定元素，先來處理計時器

首先，以Date.now()取得現在的時間，並且計算計時器結束的時間

然後每過一段時間(1秒)，要重新計算一次剩餘的秒數，如果剩餘秒數小於0，則停止計算

這邊再加上一個displayTimeLeft函式，用於顯示時間

Date.now()

此方法回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數

WindowOrWorkerGlobalScope.clearInterval()

此方法用於取消setInterval()設置的動作

Step2

const timerDisplay = document.querySelector('.display__time-left')

function displayTimeLeft(seconds) {
    const hours = Math.floor(seconds / 3600);
    const mins = Math.floor((seconds % 3600) / 60);
    const secs = (seconds % 3600) % 60
    const display = `${hours < 10 ? '0' : ''}${hours}:${mins < 10 ? '0' : ''}${mins}:${secs < 10 ? '0' : ''}${secs}`
    timerDisplay.textContent = display;
    document.title = display;
}

接下來，選定顯示的元素，然後計算出倒數的時、分、秒後設為元素的文字內容

這邊還可以透過document.title設定<title>喔

Step3

const endTime = document.querySelector('.display__end-time');

function displayEndTime(timestamp) {
    const end = new Date(timestamp);
    const hour = end.getHours();
    const minutes = end.getMinutes();
    endTime.textContent = `Be Back At ${hour < 10 ? '0' : ''}${hour}:${minutes < 10 ? '0' : ''}${minutes}`;  
}

這邊要計算倒數結束的時間為何，我們可以透過Date物件轉換秒數成可讀性較高的時間格式

Date

建立一個 JavaScript Date 物件來指向某一個時間點，Date 物件是基於世界標準時間（UTC） 1970 年 1 月 1 日開始的毫秒數值來儲存時間

Step4

const buttons = document.querySelectorAll('[data-time]');

function startTimer() {
    const seconds = parseInt(this.dataset.time);
    timer(seconds);
}
  
buttons.forEach(button => button.addEventListener('click', startTimer));

這邊要處理的是畫面頂部的按鈕，每當我們點擊一次，就要啟動一個計時器，但是同時也要取消先前啟動的計時器

function timer(seconds) {
    // clear any existing timers
    clearInterval(countdown);
		// ...
}

Step5

document.customForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const mins = this.minutes.value;
    console.log(mins);
    timer(mins * 60);
    this.reset();
});

最後這邊要來做的是自訂時間長度

當元素有name屬性，我們可以直接透過name選到想要的元素，不用再透過querySelector()

後記

這是JS30的第29天，但是是我第30篇正文，接下來會繼續完成挑戰，然後再補個心得
不過我昨天就鐵人鍊成了ㄏㄏ