リアルタイムに時刻を画像で表示する

説明

リアルタイムに時刻を画像で表示するにはsetInterval()タイマーを使って時刻を表示する処理を呼び出します。呼び出された関数側ではDateオブジェクトを生成し時刻を求めます。この時刻の数値に対応した0.gif〜9.gifの画像を用意しておきます。時刻の値に応じて画像のURLをsrcプロパティに設定します。
画像を操作する場合、通常はid属性またはname属性で名前を指定しますが、サンプルのように表示領域内にあるタグを求めるようにすると、id属性やname属性で名前を指定する必要がなくなります。これによりIDや名前を管理する必要がなくなりトラブルも防ぐ事ができます。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>現在の時刻をリアルタイムに画像で表示する</h1>
<div id="iTime">
<img src="images/0.gif" width="20" height="30"
><img src="images/1.gif" width="20" height="30"
><img src="images/colon.gif" width="10" height="30"
><img src="images/2.gif" width="20" height="30"
><img src="images/3.gif" width="20" height="30"
><img src="images/colon.gif" width="10" height="30"
><img src="images/4.gif" width="20" height="30"
><img src="images/5.gif" width="20" height="30">
</div>
</body>
</html>
window.onload = function(){
myClock.timeImage();
setInterval("myClock.timeImage()", 1000);
}
var myClock = {
timeImage : function(){
var dateObj = new Date();
var h = "0"+dateObj.getHours();
var m = "0"+dateObj.getMinutes();
var s = "0"+dateObj.getSeconds();
h = h.substring(h.length-2, h.length);
m = m.substring(m.length-2, m.length);
s = s.substring(s.length-2, s.length);
var imageTag = document.getElementById("iTime").getElementsByTagName("img");
imageTag[0].src = "images/"+h.charAt(0)+".gif";
imageTag[1].src = "images/"+h.charAt(1)+".gif";
imageTag[3].src = "images/"+m.charAt(0)+".gif";
imageTag[4].src = "images/"+m.charAt(1)+".gif";
imageTag[6].src = "images/"+s.charAt(0)+".gif";
imageTag[7].src = "images/"+s.charAt(1)+".gif";
}
}