時計

例1

文字が秒ごとに変わるデジタル時計を作ってみましょう。

上のソースはこれだけです。

<div><input id="out1"></div>

実際に文字を書くJavaScriptの部分は後で挙げます。

例2

普通の文章の中にものように埋め込めます。

<p>普通の文章の中にも <span id="out2"></span> のように埋め込めます。</p>

実際に文字を書くJavaScriptの部分は後で挙げます。

JavaScript部分

head部分には次のように定義しています。

<script>
function clock() {
  const t = new Date().toLocaleTimeString([], {hour12: false})
  document.getElementById('out1').value = t;    // 例1
  document.getElementById('out2').textContent = t; // 例2
}
setInterval(clock, 1000);
window.addEventListener('DOMContentLoaded', clock);
</script>

window.addEventListener('DOMContentLoaded', clock) は，本文の骨格が読み込まれたすぐ後で clock() を実行するためのものです。

細かなこと

window.addEventListener('load', clock); とすると，ページの骨格だけでなく，画像やスタイルシートなどすべてが読み込まれてから clock() が呼び出されます。

似た書き方として window.onload = clock; があります。こちらは，別の window.onload = ...; があると，最後のものだけが生きます。window.addEventListener() のほうは複数あっても全部が生きます。

<body onload="clock();"> のようにHTMLの要素に onload を書く方法もあります。

こういった実行を遅らせる仕組みを使わなくても，out1，out2 が現れた後に

<script>
clock();
</script>

と書くだけでもかまいません。

なお，window.addEventListener('DOMContentLoaded', clock) がなくても，setInterval(clock, 1000); は実行されますので，1000ミリ秒（1秒）たてば時計の実行が開始されます。

応用

時計をちょっと変えれば，ロケット発射のカウントダウンになります。