グラフィカルな時計

画像ファイルを使ったグラフィカルな時計を表示する
プログラムです。これは、Explorer3.0,Netscape2.0では動かないと思われます。
元々私がJavaの練習に作ったものをJavaScriptに移植したものです。

98/03/24 バグ取りをしました。
修正したところは青で書かれています。

下のリンクより実際の動きを見られます。
確認後はブラウザの "戻る" ボタンで戻ってください。

JavaScript版　　 Applet版

<HTML>

<HEAD>

<TITLE>Clock</TITLE>

</HEAD>

<!--

　　timerID = 10;

　　testImage = new Image();

　　testImage.src="../applet/n_0.gif";

　　testImage.src="../applet/n_1.gif";

　　testImage.src="../applet/n_2.gif";

　　testImage.src="../applet/n_3.gif";

　　testImage.src="../applet/n_4.gif";

　　testImage.src="../applet/n_5.gif";

　　testImage.src="../applet/n_6.gif";

　　testImage.src="../applet/n_7.gif";

　　testImage.src="../applet/n_8.gif";

　　testImage.src="../applet/n_9.gif";

　　function clock(){

　　　　clockThread = new Date();

　　　　y = "0"+clockThread.getYear();

　　　　m = "0"+(clockThread.getMonth()+1);

　　　　d = "0"+clockThread.getDate();

　　　　h = "0"+clockThread.getHours();

　　　　n = "0"+clockThread.getMinutes();

　　　　s = "0"+clockThread.getSeconds();

　　　　y = y.substring(y.length-2,y.length+1);

　　　　m = m.substring(m.length-2,m.length+1);

　　　　d = d.substring(d.length-2,d.length+1);

　　　　h = h.substring(h.length-2,h.length+1);

　　　　n = n.substring(n.length-2,n.length+1);

　　　　s = s.substring(s.length-2,s.length+1);

　　　　y0 = y.substring(0,1);

　　　　y1 = y.substring(1,2);

　　　　m0 = m.substring(0,1);

　　　　m1 = m.substring(1,2);

　　　　d0 = d.substring(0,1);

　　　　d1 = d.substring(1,2);

　　　　h0 = h.substring(0,1);

　　　　h1 = h.substring(1,2);

　　　　n0 = n.substring(0,1);

　　　　n1 = n.substring(1,2);

　　　　s0 = s.substring(0,1);

　　　　s1 = s.substring(1,2);

　　　　document.y0_d.src = "../applet/" + "n_" + y0 + ".gif";

　　　　document.y1_d.src = "../applet/" + "n_" + y1 + ".gif";

　　　　document.m0_d.src = "../applet/" + "n_" + m0 + ".gif";

　　　　document.m1_d.src = "../applet/" + "n_" + m1 + ".gif";

　　　　document.d0_d.src = "../applet/" + "n_" + d0 + ".gif";

　　　　document.d1_d.src = "../applet/" + "n_" + d1 + ".gif";

　　　　document.h0_d.src = "../applet/" + "n_" + h0 + ".gif";

　　　　document.h1_d.src = "../applet/" + "n_" + h1 + ".gif";

　　　　document.n0_d.src = "../applet/" + "n_" + n0 + ".gif";

　　　　document.n1_d.src = "../applet/" + "n_" + n1 + ".gif";

　　　　document.s0_d.src = "../applet/" + "n_" + s0 + ".gif";

　　　　document.s1_d.src = "../applet/" + "n_" + s1 + ".gif";

　　　　clearTimeout(timerID);

　　　　timerID = setTimeout('clock()',1000);

　　}

//-->

</SCRIPT>

<!--

　　document.write("<IMG SRC='../applet/n_0.gif' name='y0_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='y1_d'>");

　　document.write("<IMG SRC='../applet/n_10.gif'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='m0_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='m1_d'>");

　　document.write("<IMG SRC='../applet/n_11.gif'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='d0_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='d1_d'>");

　　document.write("<IMG SRC='../applet/n_12.gif' name='week_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='h0_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='h1_d'>");

　　document.write("<IMG SRC='../applet/n_13.gif'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='n0_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='n1_d'>");

　　document.write("<IMG SRC='../applet/n_14.gif'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='s0_d'>");

　　document.write("<IMG SRC='../applet/n_0.gif' name='s1_d'>");

　　document.write("<IMG SRC='../applet/n_15.gif'>");

//-->

</SCRIPT>

</BODY>

</HTML>

プログラムの説明です。< >で囲まれた部分は、行番号を
表しています。また、クリックすればその行へジャンプします。

<10-20> 画像ファイルを先読みします。
画像の場所は適当に変えてください。

<24-29> 時間等を取得します。

<25> getMonth()は､0～11で結果を返してくるので
"1"を足す必要があります。

<30-47> ここから下で取得した2桁の数字を桁ごとにばらします。

<48-59> 文字の画像は初めに表示したら書き換えないので、
数字のみを常に書き換え続けるようにします。
画像の場所、名前は適当に変えてください。
（この色で書かれた部分です。）
今回バグ取りによって修正され青で書かれたところと、
70-87行目まででname='....'の部分とそれぞれ
同じ名前を書いてください。

<66> onLoad="setTimeout('clock()',1000)" を忘れないよう気をつけてください。

<68-89t> この範囲のものを時計を表示させたいところに記述してください。
このソースでは純粋にJavaScriptのみを表示するようにしてありますが、
動作見本はテーブルを使うようにしてあります。
あらかじめすべて "0" の時計を表示させます。
画像のファイル名及びパスは適当に変えてください。
バグ取りをした結果画像表示をする際に
JavaScriptでdocument.write("<IMG SRC='....' name='....'>");
のようにしないと画像がうまく更新されないようになりました。
普通に<IMG SRC="....">とすることは出来ません。

<10-20>	画像ファイルを先読みします。画像の場所は適当に変えてください。
<24-29>	時間等を取得します。
<25>	getMonth()は､0～11で結果を返してくるので "1"を足す必要があります。
<30-47>	ここから下で取得した2桁の数字を桁ごとにばらします。
<48-59>	文字の画像は初めに表示したら書き換えないので、数字のみを常に書き換え続けるようにします。画像の場所、名前は適当に変えてください。（この色で書かれた部分です。）今回バグ取りによって修正され青で書かれたところと、 70-87行目まででname='....'の部分とそれぞれ同じ名前を書いてください。
<66>	onLoad="setTimeout('clock()',1000)" を忘れないよう気をつけてください。
<68-89t>	この範囲のものを時計を表示させたいところに記述してください。このソースでは純粋にJavaScriptのみを表示するようにしてありますが、動作見本はテーブルを使うようにしてあります。あらかじめすべて "0" の時計を表示させます。画像のファイル名及びパスは適当に変えてください。バグ取りをした結果画像表示をする際に JavaScriptでdocument.write("<IMG SRC='....' name='....'>"); のようにしないと画像がうまく更新されないようになりました。普通に<IMG SRC="....">とすることは出来ません。