[JS30] -29) Countdown Clock

ボタンを押したり、時間を入力したりして画面を空にします。

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

const $customForm = document.querySelector('#custom');
const $customTimeInput = document.querySelector('input[name="minutes"]');
const $timerButtons = document.querySelectorAll('.timer__button');

$customForm.addEventListener('submit', handleCustomTimeInput)
$timerButtons.forEach(($timerButton) => {
    $timerButton.addEventListener('click',() => displayCountdown(
        $timerButton.dataset.time
    ))
})


function handleCustomTimeInput(e) {
    e.preventDefault();
    displayCountdown($customTimeInput.value);
}

function displayCountdown(seconds) {
    const min = Math.floor(seconds / 60);
    const secondsLeft = seconds % 60;
    $timerDisplay.textContent = `${min} : ${secondsLeft}`;
}

けいさんじかん

他にタイミングを実現する方法はありますか?

タイマーの作成

function timer(seconds) {
  const now = Date.now();
  const then = now + seconds * 1000;
  
  setInterval(() => {
  	const secondsLeft = Math.round((then - Date.now()) / 1000);
    console.log(secondsLeft);
    
  }, 1000);

秒数を入れると、現在の時点で入れた秒数が加算されます.
その後、1秒ごとに現在の時刻を受け入れ、減算します.
混ざったら、下図を参考にします.

1秒ごとに指定の時間から1秒だけ抽出すればいいのではないでしょうか.
こんなに面倒にならなければならないのは理由がある.
場合によっては、setInterval関数が正常に動作しない場合があります.たとえば、ブラウザでロバートしたりmacでスクロールしたりします.この場合、現在の時間を受け入れ続けると、すぐに正常に戻るので、そうします.
setInterval関数がひどく動くことがあるので...知っていればよかったのに.

clearIntervalを使用してタイマを初期化する

別のボタンを押すとsetInterval関数が重なるべきではないので、最初のclearIntervalはclearIntervalであり、関数が実行されていても初期化できます.タイマーを宣言する前にclearIntervalを行う必要があるので、letを一番上の宣言に割り当てておきます.
初めてJavaScriptでゲームを作った時のことを思い出しました.当時setIntervalを初めて使用したとき、2つの関数が重なったり、clearIntervalがうまく書けなかったりしたので、難しいですが、関数をclearIntervalに初期化するのは良い方法だったようです.覚えてろ!

let countdown;

function timer(seconds) {
    clearInterval(countdown);

    const now = Date.now();
    const then = now + seconds * 1000;
    countdown = setInterval(() => {

        const secondsLeft = Math.round((then - Date.now()) / 1000);
        displayCountdown(secondsLeft)
        if(secondsLeft <= 0) clearInterval(countdown);
    }, 1000)
}

1桁前に0を加算

醜いですね.
1桁のときは前に0をつけます.

よし!

カウントダウン終了点を表示

function displayEndTime(time) {
    const date = new Date(time);
    const hour = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    $endTime.textContent = `${hour}시 ${minutes}분 ${seconds}초에 종료됩니다`
}

function timer(seconds) {
    clearInterval(countdown);

    const now = Date.now();
    const then = now + seconds * 1000;

    displayEndTime(then);//
    countdown = setInterval(() => {

        const secondsLeft = Math.round((then - Date.now()) / 1000);
        displayCountdown(secondsLeft)
        console.log(secondsLeft)
        if(secondsLeft <= 0) clearInterval(countdown);
    }, 1000)
}

最初のカウントダウンの時間を入力します.Date.now()値にカウントダウン時間を加算します.これは私たちが移動する時間で、あなたはdisplayEndTime(then)をすることができます.

タイマーを起動すると最初の画面が表示されます

setIntervalは画面に残り時間を表示するので、以下のようにします.
最初の画面には時間が表示されます.

function timer(seconds) {
    clearInterval(countdown);

    const now = Date.now();
    const then = now + seconds * 1000;
    displayCountdown(seconds)//

    displayEndTime(then);
    countdown = setInterval(() => {

        const secondsLeft = Math.round((then - Date.now()) / 1000);
        displayCountdown(secondsLeft)
        console.log(secondsLeft)
        if(secondsLeft <= 0) clearInterval(countdown);
    }, 1000)
}