現在時刻を特定の間隔で自動更新したい | 日付・時間操作

現在時刻を特定の間隔で自動更新したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、現在の時刻を1秒ごとに自動更新し、リアルタイムの時計として表示します。

使用するメソッド: setInterval(), Dateオブジェクト
現在時刻を自動更新するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧
Windowオブジェクトメソッドの機能一覧

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

setInterval()メソッドを使用して、1秒ごとに現在時刻を更新します。Dateオブジェクトを使って、現在の時刻を取得し、時間、分、秒を表示します。

現在時刻を自動更新するプログラム

以下のコードでは、1秒ごとに現在の時刻がリアルタイムで更新されます。

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 updateClock() {
                const now = new Date();
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
            }

            // 1秒ごとに時計を更新
            setInterval(updateClock, 1000);
            updateClock(); // 初回即時更新
        }
    </script>
</head>
<body>

    <h1>現在時刻を特定の間隔で自動更新する方法</h1>

    <div id="clock"></div>

</body>
</html>