以下のようなリアルタイムの時計をJavaScriptを使って表示します。

    <!-- "Clock"というIDを持つ<p>タグを作成します -->
    <p id="Clock"></p>
    
    <script>
        // 現在の時間を取得し、表示するための関数を定義します
        function clock() {
            
            // 現在の日時を取得します
            let now = new Date();

            // 現在の時間、分、秒を取得します
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();

            // 時間が10未満の場合、先頭に0を付けて2桁にします
            if (hour < 10) {
                hour = '0' + hour;
            }
            
            // 分が10未満の場合、先頭に0を付けて2桁にします
            if (minute < 10) {
                minute = '0' + minute;
            }

            // 秒が10未満の場合、先頭に0を付けて2桁にします
            if (second < 10) {
                second = '0' + second;
            }

            // "現在時刻:"という文字列と、時、分、秒を結合してメッセージを作成します
            let message = "現在時刻:" + hour + ":" + minute + ":" + second;

            // "Clock"というIDを持つ要素に対して、作成したメッセージを表示します
            document.getElementById("Clock").innerHTML = message;
        }
        
        // "clock"関数を1秒ごと(1000ミリ秒ごと)に実行します
        setInterval('clock()', 1000);
    </script>

ポイントは2点。

1.数値を2桁で表示するために1桁の場合は先頭に'0'を挿入するという分岐処理をしています。

2.setIntervalメソッドを使い1000ミリ秒(=1秒)ごとに処理を更新しています。

ちなみにこのとき21行目を以下のようにテンプレートリテラルを使って書くと更にスッキリ書くことができます。

ポイントは2点

1.文字列全体をバッククオートで囲みます。(ダブルクオートやシングルクォートではなく)

2.変数は${}で囲みます。


let message = `現在時刻:${hour}:${minute}:${second}`;

最後までお読みいただきありがとうございます。