[JS] Day 29 - Countdown Timer

demo:

デモサイト

github:

Danji-ya

[JS] Day 29 - Countdown Timer

🎯 機能要件

カウントダウンを実現.

検索フォームに値を入力すると、enterを入力してカウントダウンを再開します.

ボタンをクリックしてカウントダウンを再開します.

終了時間は

カウントダウンで表示されます.

🚀 学識

new Date()

Dateオブジェクトは、1970年1月1日の「協定世界時」の真夜中との時間差が밀리초であることを示す整数を返し、초 단위에 1000을 곱하여 밀리 단위로 바꿔주어야 한다.と入力または設定します.
そしてそれを利用して(설정된 시간 - 현재 시간) / 1000でカウントダウンを実現すればよい.

function countdown(seconds) {
        if(timer) clearInterval(timer); // for restart

        const startTime = new Date().getTime();
        const endTime = startTime + seconds * 1000; //getTime() = ms

        displayRemainingTime(seconds);
        displayEndTime(endTime);

        timer = setInterval(() => {
            const remainingTime = Math.round((endTime - new Date().getTime()) / 1000);
            if(remainingTime < 0) return clearInterval(timer);

            displayRemainingTime(remainingTime);
        }, 1000);
}

HTMLFormElement.reset()

検索フォームに値を入力し、Enterをタップして新しいカウントダウンを開始すると、検索フォームを初期値thisに戻したいです.value(), this.textContentメソッドを使用したことがありますが、自分が望むように実現していません.
この問題を解決するために、this.reset() 메서드を使用することができる.

function updateTimer(e) {
  e.preventDefault();

  countdown(this.minutes.value * 60);
  this.reset();
}

💻 最終コード

(function(){
    const $displayTimeLeft = document.querySelector(".display__time-left");
    const $displayEndTime = document.querySelector(".display__end-time");
    const $timerControls = document.querySelector(".timer__controls");
    const $sendForm = document.querySelector("#custom");

    let timer;

    function countdown(seconds) {
        if(timer) clearInterval(timer); // for restart

        const startTime = new Date().getTime();
        const endTime = startTime + seconds * 1000; //getTime() = ms

        displayRemainingTime(seconds);
        displayEndTime(endTime);

        timer = setInterval(() => {
            const remainingTime = Math.round((endTime - new Date().getTime()) / 1000);
            if(remainingTime < 0) return clearInterval(timer);

            displayRemainingTime(remainingTime);
        }, 1000);
    }

    function displayRemainingTime(sec) {
        const mins = Math.floor(sec / 60);
        const seconds = sec % 60;

        $displayTimeLeft.textContent = `${('00' + mins).slice(-2)}:${('00' + seconds).slice(-2)}`;
    }

    function displayEndTime(endTime) {
        const time = new Date(endTime);

        $displayEndTime.textContent = `${('00' + time.getHours()).slice(-2)}:${('00' + time.getMinutes()).slice(-2)}`;
    }

    function clickAction(e) {
        if(e.target.classList.contains("timer__button")){
            countdown(e.target.dataset.time);
        }
    }

    function updateTimer(e) {
        e.preventDefault();

        countdown(this.minutes.value * 60);
        this.reset();
    }

    $timerControls.addEventListener("click", clickAction);
    $sendForm.addEventListener("submit", updateTimer);
})();