iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
Modern Web

森林系工程師之開始工作才學JS?!系列 第 31

Day30 -- Countdown Clock

目標

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

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物件轉換秒數成可讀性較高的時間格式

Countdown%20Clock%208e2acbb8f2f4471cb5fa6d4629607ffe/_2020-10-14_00.12.59.png

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);
		// ...
}

Countdown%20Clock%208e2acbb8f2f4471cb5fa6d4629607ffe/_2020-10-14_00.12.59%201.png

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篇正文,接下來會繼續完成挑戰,然後再補個心得
不過我昨天就鐵人鍊成了ㄏㄏ


上一篇
Day29 -- Video Speed Controller
下一篇
Day31 -- Whack A Mole
系列文
森林系工程師之開始工作才學JS?!32

尚未有邦友留言

立即登入留言