特定の日付までのカウントダウンを表示したい | 日付・時間操作

特定の日付までのカウントダウンを表示したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、指定した日付までの残りの日数、時間、分、秒をリアルタイムで表示するカウントダウンタイマーを作成します。

使用するメソッド: setInterval(), Dateオブジェクト
特定の日付までのカウントダウンを表示するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧
Windowオブジェクトメソッドの機能一覧

使用するメソッド: setInterval(), Dateオブジェクト

setInterval()メソッドを使って、1秒ごとに特定の日付までの残り時間を計算し、Dateオブジェクトを用いて日付や時間の差を計算します。

特定の日付までのカウントダウンを表示するプログラム

以下のコードでは、2030年12月31日までのカウントダウンをリアルタイムで表示します。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特定の日付までのカウントダウンを表示する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // 特定の日付までのカウントダウンを表示する関数
            function countdown(targetDate) {
                const now = new Date();
                const timeDiff = targetDate - now;

                if (timeDiff > 0) {
                    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));  // 日数
                    const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  // 時間
                    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));  // 分
                    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);  // 秒

                    return `${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;
                } else {
                    return "カウントダウン終了";
                }
            }

            // カウントダウンのターゲット日付（例: 2030年12月31日）
            const targetDate = new Date(2030, 11, 31);  // 12月は0から始まるインデックスで11
            setInterval(function() {
                document.getElementById('countdown').textContent = countdown(targetDate);
            }, 1000);  // 1秒ごとにカウントダウンを更新
        }
    </script>
</head>
<body>

    <h1>特定の日付までのカウントダウンを表示する方法</h1>

    <div id="countdown"></div>

</body>
</html>