[JavaScript30] ⏲ 29. Countdown Timer

27850 ワード
JavaScript javascript30 テキストリンク

⏲ 29. Countdown Timer



イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style_JuneHyung.css">
</head>
<body>
    <div class="timer">
        <div class="timer__controls">
            <button data-time="20" class="timer__button">20 Secs</button>
            <button data-time="300" class="timer__button">Work 5</button>
            <button data-time="900" class="timer__button">Quick 15</button>
            <button data-time="1200" class="timer__button">Snack 20</button>
            <button data-time="3600" class="timer__button">Lunch Break</button>
            <form name="customForm" id="custom">
                <input type="text" name="minutes" placeholder="Enter Minutes">
            </form>
        </div>
        <div class="display">
            <h1 class="display__time-left"></h1>
            <p class="display__end-time"></p>
        </div>
    </div>
    
    <script src="scripts_JuneHyung.js"></script>
</body>
</html>
初期画面

🌏 プロセス


👉 1. Timer()

function timer(seconds) {
    const now = Date.now();
    const then = now + seconds * 1000;
    // console.log({ now, then });
    displayTimeLeft(seconds);

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

        // display it
        displayTimeLeft(secondsLeft);
    }, 1000);
}

function displayTimeLeft(seconds) {
    console.log(seconds);
}
その後、
  • は、現在の時刻が入力された時刻を加算する.
  • secondsLeft残り時間.
  • 残り時間が0の場合、カウントダウンを停止します.そうしないと、1秒ごとに画面に出力され、カウントされます.

    • 👉 2. displayTimeLeft()


  • 残りの時間と秒を見せて

  • 秒を受け入れて適切な計算を行い、10未満の場合は0を加算して出力します.
    ex) 01

  • タブのタイトル(document.title)も、残り時間を表示するように設定されています.
    • function displayTimeLeft(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}: ${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
    document.title = display;
    timerDisplay.textContent = display;
    // console.log(minutes);
}

    👉 3. displayEndTime()

  • で出力された時刻の下に終了した時刻が表示されます.
  • displayTimeLeft()と同様です.
  • ここの点数が10未満なら前に0を足す
    • function displayEndTime(timestamp) {
    const end = new Date(timestamp);
    const hour = end.getHours();
    const adjustedHour = hour > 12 ? hour - 12 : hour;
    const minutes = end.getMinutes();
    endTime.textContent = `Be Back At ${adjustedHour} : ${minutes < 10 ? '0' : ''}${minutes}`
}

    👉 4. quickStart()


    メニューバーをクリックして自動的に入力
    データセットの値を受信して設定し、ボタンイベントを登録します.
    const buttons = document.querySelectorAll('[data-time]');


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

    ~~ 중략 ~~
}


function startTimer() {
    // console.log(this.dataset.time);
    const seconds = parseInt(this.dataset.time);
    timer(seconds);

}

buttons.forEach(button => button.addEventListener('click', startTimer));

    👉 5.入力時間

    document.customForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const mins = this.minutes.value;
    console.log(mins);
    timer(mins * 60);
    this.reset();
});
    ES 6の変化:Var、さようなら
    ScenarioUtils,SpringBoot Bean出力フィルタツール