グラフィカルな時計

グラフィカルな時計（24時間表示）

Sample

画像の素材として下のようなフリー素材(Digit Mania)を使いました。

0.gif

1.gif

2.gif

3.gif

4.gif

5.gif

6.gif

7.gif

8.gif

9.gif

10.gif

画像は全てプリロードした方がいいと思います。

スクリプト（これはJavaスクリプトだけで書いてます）

<SCRIPT LANGUAGE="JavaScript">
<!--
preImage = new Array(11);
for(i=0;i<11;i++)
{
preImage[i] = new Image();
preImage[i].src = "images/"+i+".gif";
}
timerID = 10;
function clock()
{
if (document.images)
{
ct = new Date();
h = "0"+ct.getHours();
m = "0"+ct.getMinutes();
s = "0"+ct.getSeconds();
h = h.substring(h.length-2,h.length+1);
m = m.substring(m.length-2,m.length+1);
s = s.substring(s.length-2,s.length+1);
h0 = h.substring(0,1);
h1 = h.substring(1,2);
m0 = m.substring(0,1);
m1 = m.substring(1,2);
s0 = s.substring(0,1);
s1 = s.substring(1,2);

document.H0.src="images/"+h0+".gif";
document.H1.src="images/"+h1+".gif";
document.M0.src="images/"+m0+".gif";
document.M1.src="images/"+m1+".gif";
document.S0.src="images/"+s0+".gif";
document.S1.src="images/"+s1+".gif";
clearTimeout(timerID);
timerID = setTimeout('clock()',1000);
}
}
// -->
</SCRIPT>
</head>