グラフィカルな時計(12時間表示)

Sample

画像の素材として下のようなフリー素材(Digit Mania)を使いました。
0.gif 1.gif 2.gif 3.gif 4.gif 5.gif 6.gif 7.gif 8.gif 9.gif 12.gif 10.gif 11.gif
画像は全てプリロードした方がいいと思います。
スクリプトその１（これはJavaスクリプトだけで書いてます）

<html>
<head>
<title></title>

<SCRIPT LANGUAGE="JavaScript">
<!--
preImage = new Array(13);
for(i=0;i<13;i++)
{
preImage[i] = new Image();
preImage[i].src = "images/"+i+".gif";
}
timerID = 10;
function clock()
{
if (document.images)
{
ct = new Date();
ap = ct.getHours();
hh = ct.getHours();
if(hh > 12){
hh = hh - 12};
h = "0"+hh;
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);

if(ap < 13){
document.AP.src="images/10.gif"
}else{
document.AP.src="images/11.gif"};
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>

<BODY onLoad="setTimeout('clock()',1000)">

<IMG SRC="images/10.gif" width="25" height="50" name="AP"
><IMG SRC="images/0.gif" width="25" height="50" name="H0"
><IMG SRC="images/0.gif" width="25" height="50" name="H1"
><IMG SRC="images/12.gif" width="25" height="50"
><IMG SRC="images/0.gif" width="25" height="50" name="M0"
><IMG SRC="images/0.gif" width="25" height="50" name="M1"
><IMG SRC="images/12.gif" width="25" height="50"
><IMG SRC="images/0.gif" width="25" height="50" name="S0"
><IMG SRC="images/0.gif" width="25" height="50" name="S1"
>

</body>
</html>
スクリプトその2（この書き方でも同じです）

<body onLoad="setTimeout('clock()',1000);">

<script language="JavaScript">
<!--
document.write('<CENTER><IMG src="images/realclock/10.gif" name="I1">');
document.write('<IMG src="images/realclock/8.gif" name="I2"><IMG src="images/realclock/8.gif" name="I3">');
document.write('<IMG src="images/realclock/12.gif"><IMG src="images/realclock/8.gif"name="I4"><IMG src="images/realclock/8.gif" name="I5">');
document.write('<IMG src="images/realclock/12.gif"><IMG src="images/realclock/8.gif" name="I6"><IMG src="images/realclock/8.gif" name="I7">');
function clock(){
t=new Date;
H="0"+t.getHours();
M="0"+t.getMinutes();
S="0"+t.getSeconds();
if(12<=H){
if(H==12){T="11";}
else{H="0"+(H-12);T="11";}}
else{
if(H==0){H=""+12;T="10";}
T="10";}
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);
H10=H.charAt(0);H1=H.charAt(1);
M10=M.charAt(0);M1=M.charAt(1);
S10=S.charAt(0);S1=S.charAt(1);
setTimeout('clock()',1000);
document.I1.src="images/realclock/"+T+".gif";
document.I2.src="images/realclock/"+H10+".gif";
document.I3.src="images/realclock/"+H1+".gif";
document.I4.src="images/realclock/"+M10+".gif";
document.I5.src="images/realclock/"+M1+".gif";
document.I6.src="images/realclock/"+S10+".gif";
document.I7.src="images/realclock/"+S1+".gif";
}
// -->
</script>