グラフィカルな時計2

グラフィカルな時計を表示するプログラムです。
これは、Explorer3.0,Netscape2.0では動かないので
それらのブラウザでは表示しないようになります。
さらに Ver1.1 のものに曜日表示の機能も付けました。

また、従来の書き方と違い"JavaScript"のファイルを
外部に持たせることによりプログラムの修正等も
簡単に出来るようになります。
また、HTML本体をいじらなくて良いため
全体への影響も少なくなります。

色で書かれた文字は同色で書かれた同じ名前を使用するということです。
確認をクリックすれば実際の動きを見られます。
確認後はブラウザの "戻る" ボタンで戻ってください。

確認

clock_2.html

<HTML>

<HEAD>

<TITLE>Clock2</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

clock_2.js

// ブラウザ及びバージョンチェック

var ver4 = (navigator.appVersion.charAt(0) == "4");

var Netscape4 = ver4 && (navigator.appName >= "Netscape");

var Explorer4 = ver4 && (navigator.appName.charAt(0) == "M");

var Netscape3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName == "Netscape"));

if(Netscape3 || Netscape4 || Explorer4){

//画像の先読み(数字のみ)

　　testImage = new Image();

　　testImage.src="n_0.gif";

　　testImage.src="n_1.gif";

　　testImage.src="n_2.gif";

　　testImage.src="n_3.gif";

　　testImage.src="n_4.gif";

　　testImage.src="n_5.gif";

　　testImage.src="n_6.gif";

　　testImage.src="n_7.gif";

　　testImage.src="n_8.gif";

　　testImage.src="n_9.gif";

　　timerID = 10;

}

function clock(){

　　if(Netscape3 || Netscape4 || Explorer4){

　　　　var weekArray = new Array("sun","mon","tue","wed","thu","fri","sat");

　　　　var clockThread = new Date();

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

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

　　　　var week = weekArray[clockThread.getDay()]

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

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

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

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

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

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

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

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

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

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

　　　　var y0 = y.substring(0,1);

　　　　var y1 = y.substring(1,2);

　　　　var m0 = m.substring(0,1);

　　　　var m1 = m.substring(1,2);

　　　　var d0 = d.substring(0,1);

　　　　var d1 = d.substring(1,2);

　　　　var h0 = h.substring(0,1);

　　　　var h1 = h.substring(1,2);

　　　　var n0 = n.substring(0,1);

　　　　var n1 = n.substring(1,2);

　　　　var s0 = s.substring(0,1);

　　　　var s1 = s.substring(1,2);

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

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

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

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

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

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

　　　　document.week_d.src = week + ".gif";

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

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

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

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

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

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

　　　　clearTimeout(timerID);

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

　　}

if(Netscape3 || Netscape4 || Explorer4){

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　setTimeout('clock()',1000);

}

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

clock_2.html

<8> <SCRIPT SRC="clock_2.js"></SCRIPT>
を表示したいところに記述してください。
ファイル名及びパスは適当に変えてください。

clock_2.js

clock_2.js JavaScriptのプログラムファイルです。
拡張子は ".js" となります。

<1-5> このプログラムが動作するブラウザの
バージョンをチェックします。

<8-19> 画像を先読みします。
数字のみを先読みするようにしていますが場合によっては
それ以外も読み込むようにしてください。

<24-69> 時計プログラムの関数部分です。

<26> 配列に曜日ごとの画像ファイル名を格納します。
日曜日から土曜日までファイル名を順番に記述してください。
(拡張子は除いてください)

<28-34> 時間等を取得します。

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

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

<53-65> 文字の画像は初めに表示したら書き換えないので、
数字のみを常に書き換え続けるようにします。
画像の場所、名前は適当に変えてください。
青で書かれたところと、
74-90行目まででname='....'の部分とそれぞれ
同じ名前を書いてください。

<72-88> このソースでは純粋にJavaScriptのみを表示するようにしてありますが、
動作見本はテーブルを使うようにしてあります。
あらかじめすべて "0" の時計を表示させます。
画像のファイル名及びパスは適当に変えてください。

時計の画像サイズは下のように記述すれば変更できます。
(画像の高さは全て統一しないと格好悪くなってしまいます。)

document.write("<IMG SRC='n_0.gif' width='XXX' height='XXX' name='xxx'>");

XXX の所に表示したい画像のサイズを記述します。

<90> setTimeout('clock()',1000);
これを書くことにより"clock"関数が呼び出されます。

clock_2.html
<8>	<SCRIPT SRC="clock_2.js"></SCRIPT> を表示したいところに記述してください。ファイル名及びパスは適当に変えてください。

clock_2.js
clock_2.js	JavaScriptのプログラムファイルです。拡張子は ".js" となります。
<1-5>	このプログラムが動作するブラウザのバージョンをチェックします。
<8-19>	画像を先読みします。数字のみを先読みするようにしていますが場合によってはそれ以外も読み込むようにしてください。
<24-69>	時計プログラムの関数部分です。
<26>	配列に曜日ごとの画像ファイル名を格納します。日曜日から土曜日までファイル名を順番に記述してください。 (拡張子は除いてください)
<28-34>	時間等を取得します。
<29>	getMonth()は､0～11で結果を返してくるので "1"を足す必要があります。
<35-52>	ここから下で取得した2桁の数字を桁ごとにばらします。
<53-65>	文字の画像は初めに表示したら書き換えないので、数字のみを常に書き換え続けるようにします。画像の場所、名前は適当に変えてください。青で書かれたところと、 74-90行目まででname='....'の部分とそれぞれ同じ名前を書いてください。
<72-88>	このソースでは純粋にJavaScriptのみを表示するようにしてありますが、動作見本はテーブルを使うようにしてあります。あらかじめすべて "0" の時計を表示させます。画像のファイル名及びパスは適当に変えてください。時計の画像サイズは下のように記述すれば変更できます。 (画像の高さは全て統一しないと格好悪くなってしまいます。) document.write("<IMG SRC='n_0.gif' width='XXX' height='XXX' name='xxx'>"); XXX の所に表示したい画像のサイズを記述します。
<90>	setTimeout('clock()',1000); これを書くことにより"clock"関数が呼び出されます。