JavaScriptでカウントダウン

イベントなどの申し込みなどで、申し込み終了日までをカウントダウンさせたい時などは現在の日付を取得するのに便利です。

しかし、このJavaScriptだけだとローカルの時計、PCやスマホの時刻に依存するので、ユーザー側で時刻を変更してしまうと、問題が起こりそうです。

となると、PHPなどでサーバーの時刻を取得してJavaScriptに時刻を渡すのが良いなと思います。

<script>
        // カウントダウンの目標日時を設定（東京のタイムゾーンで2024年12月25日12時）
        var countDownDate = new Date("Dec 25, 2024 12:00:00").getTime();

        // 1秒ごとに更新する関数をセット
        var x = setInterval(function() {

            // 現在の日時を取得
            var now = new Date().getTime();

            // 目標日時までの残り時間を計算
            var distance = countDownDate - now;

            // 日、時、分、秒を計算
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // 結果を表示
            document.getElementById("countdown").innerHTML = days + "日 " + hours + "時間 "
            + minutes + "分 " + seconds + "秒 ";

            // カウントダウンが終了した場合の処理
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("countdown").innerHTML = "キャンペーンは終了しました";
            }
        }, 1000);
    </script>

<p id="countdown"></p>