時計

例1

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

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

<p><input id="myinput"></p>

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

例2

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

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

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

JavaScript部分

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

<script type="text/javascript">
function foo(x) { return (x < 10) ? '0' + x : x; }
function clock() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var t = foo(h) + ':' + foo(m) + ':' + foo(s);
  document.getElementById('myinput').value = t;    // 例1
  document.getElementById('myspan').innerHTML = t; // 例2
}
setInterval('clock();', 1000);
window.onload = clock;
</script>

window.onload = clock; は，本文が読み込まれたすぐ後で clock() を実行するためのものです。この代わりに

<body onload="clock();">

と書くほうが古いブラウザにも対応できるのですが，JavaScript部分とHTML部分を切り分けるほうがプログラミングのスタイルとしては優れています。いずれにしても，このような指定がなくても，setInterval('clock();', 1000); と書いてありますので，1000ミリ秒（1秒）たてば時計の実行が開始されます。

もう一つの方法は，setInterval() ではなく setTimeout() を使うことです。これは1度しか実行されませんので，呼び出された関数のほうで再設定しなければなりません。やや面倒ですが，古いブラウザでも使えます。

function clock() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var t = foo(h) + ':' + foo(m) + ':' + foo(s);
  document.getElementById('myinput').value = t;
  document.getElementById('myspan').innerHTML = t;
  setTimeout('clock();', 1000);
}
window.onload = function() {
  setTimeout('clock();', 1000);
}

奥村晴彦

Last modified: 2012-04-18 09:29:58