JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptでカウントダウンタイマーを作成する方法を解説

Webサイトでは、イベント開始までの残り時間やセールの締め切り表示など、カウントダウンタイマーを設置したい場面は数多くあります。JavaScriptでは、DateオブジェクトとsetInterval()メソッドを組み合わせるだけで、誰でも簡単にカウントダウンタイマーを実装できます。

ここでは、指定した日時までの残り時間を「日・時・分・秒」の形式でリアルタイムに表示するサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .timer {
        text-align: center;
        font-size: 60px;
        margin-top: 0px;
        color: white;
        background-color: rgb(100, 38, 214);
    }
</style>
</head>
<body>
<h1 style="text-align: center;">Countdown Timer Example</h1>
<h2 class="timer"></h2>
<script>
    var countDownDate = new Date("June 5, 2022 11:27:15").getTime();
    var timeClear = setInterval(function() {
        var now = new Date().getTime();
        var timeLeft = countDownDate - now;
        var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        var hours = Math.floor(
            (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        if (timeLeft < 0) {
            clearInterval(timeClear);
            document.querySelector(".timer").innerHTML = "Timer Finished";
        }
    }, 1000);
</script>
</body>
</html>

コードのポイント

  • 目標日時の設定：new Date("June 5, 2022 11:27:15").getTime()で、カウントダウンの基準となる日時をミリ秒単位で取得しています。実際に使用する際は、この日付を任意の未来の日時に書き換えてください。
  • 1秒ごとの更新：setInterval()を使い、1000ミリ秒（1秒）間隔で処理を繰り返し実行することで、表示を常に最新の状態に保っています。
  • 残り時間の計算：現在時刻と目標日時の差分（ミリ秒）をもとに、Math.floor()で日・時・分・秒をそれぞれ切り捨て計算しています。
  • 終了処理：残り時間が0未満になったらclearInterval()でタイマーを停止し、画面には「Timer Finished」という完了メッセージが表示されます。

実行結果

上記のコードをブラウザで実行すると、紫の背景に大きな白い文字で残り時間がカウントダウン表示され、指定した日時を過ぎると自動的に「Timer Finished」へと切り替わります。

【初心者向け】JavaScriptでカウントダウンタイマーを作成する方法を解説

  1. JavaScriptでタイピング効果（タイプライターエフェクト）を作成する方法を解説

    Webサイトに動きを加える演出のひとつとして人気が高いのが、文字が一文字ずつ打ち込まれていくような「タイピング効果（タイプライターエフェクト）」です。JavaScriptでは、setTimeout() を使った再帰処理と charAt() メソッドを組み合わせることで、この効果をシンプルに実装できます。以下に、ボタンをクリックするとテキストが一文字ずつ表示されるサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <head> <style> body{ font-family: Sego

  2. JavaScriptで定数を作成する方法とは？constキーワードの使い方を実例付きで解説

    JavaScriptで定数を作成するには、constキーワードを使用します。constで宣言された変数は、一度値を代入すると後から再代入することができません。もし再代入を試みると、TypeErrorエラーが発生します。定数作成のコード例以下は、JavaScriptでconstを使って定数を作成し、その値を変更しようとしたときの挙動を確認できるサンプルコードです。サンプルコード<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma,