以下のようなリアルタイムの時計を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}`;