Ｊａｖａ Ｓｃｒｉｐｔの解説
３．時間表示
１．時刻の表示
ページが開いたときの時刻を表示するプログラムです。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例１＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜ＨＲ＞”）；
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜Ｈ１＞現在の時刻は",h,"時",m,"分",s,"秒です＜／Ｈ１＞”）；
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜ＨＲ＞”；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例１表示 ここをクリックして下さい。例が表示されます。
＜解説＞
1.時刻の取得
var today=new Date();todayに現在の日時が代入されます。
var h=today.getHours();現在の時間が代入されます。
var m=today.getMinutes();現在の分が代入されます。
var s=today.getSeconds();現在の秒が代入されます。
これ以外に，var year=today.getYear()は，西暦の下２桁，var month=today.getMonth()は月（ただし０から１１の数字ですので＋１しないと正しい月になりません）。
var day=today.getDate()は日にち，var yobi=today.getDay()は曜日が０から６の数字で与えられます。０は日曜日，６は土曜日です。
これらを適当に組み合わせれば，年から秒まで表示できます。
2.表示
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜Ｈ１＞現在の時刻は",h,"時",m,"分",s,"秒です＜／Ｈ１＞”）；
こういう感じで表示します。
２．動く時計
動かないと時計とは言えません。数字を動かして見ましょう。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 時計＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
function jikoku(){
setTimeout("jikoku()",1000);
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．ｈｔｅｘｔ．ｖａｌｕｅ＝ｈ；
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．ｍｔｅｘｔ．ｖａｌｕｅ＝ｍ；
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．ｓｔｅｘｔ．ｖａｌｕｅ＝ｓ；
ｗｉｎｄｏｗ．ｓｔａｔｕｓ＝h+"時"+m+"分"+s+"秒";
｝
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＦＯＲＭ ＮＡＭＥ＝”ＭｙＦｏｒｍ”＞
＜ＩＮＰＵＴ ＳＩＺＥ＝２ ＮＡＭＥ＝”ｈｔｅｘｔ”＞時
＜ＩＮＰＵＴ ＳＩＺＥ＝２ ＮＡＭＥ＝”ｍｔｅｘｔ”＞分
＜ＩＮＰＵＴ ＳＩＺＥ＝２ ＮＡＭＥ＝”ｓｔｅｘｔ”＞秒
＜／ＦＯＲＭ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
jikoku();
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例２表示 ここをクリックして下さい。例が表示されます。
1.setTimeout("jikoku()",1000);１秒毎に関数jikoku()をよびますので，１秒毎にh,m,sに値が代入されます。
2.ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．ｈｔｅｘｔ．ｖａｌｕｅ＝ｈ；テキストボックスに値を代入します。
3.＜ＩＮＰＵＴ ＳＩＺＥ＝２ ＮＡＭＥ＝”ｈｔｅｘｔ”＞時，テキストボックスに表示します。
4.ｗｉｎｄｏｗ．ｓｔａｔｕｓ＝h+"時"+m+"分"+s+"秒";ステースバーへの表示です。
３．グラフィック時計
動く時計はできましたが，これでは見栄えがしません。グラフィック時計を作ってみましょう。
絵は，うまくないので数字をそのまま絵にしました。５０×５０の大きさの絵を付属のソフト「ペイント」で作り
gix-proでｇｉｆ画像に変換してます。gix-proはリンクのページを参考にして下さい。
例３表示 ここをクリックして下さい。例が表示されます。
＜改造の注意点＞
1)img[0]=new Image(50,50); これは，５０×５０の大きさの画像を意味しますので，自分で好きな大きさにして下さい。
2)img[0].src="../game2/number0.gif"; game2のフォルダーにnumber0.gifの画像を置いてます。number0.gifは，「０」の絵です。以下それぞれの画像は同じ数字の絵を意味します。
3)document.images[0].src=img[h1].src; images[0]は，ページの初めからの画像の番号です。初期値は０です。ですから１番の絵は「０」です。
プログラムでは，images[＊]の＊の番号が０，１，３，４，６，７の順番になってるのは，時，分，秒という画像が２，５，８の順番の所にあるからです。
もし，時計より前に別な画像が２個あれば，時計の初め画像の番号は，２になります。document.images[2].src=img[h1].src以下数字は，２，３，５，６，８，９と増えます。
時計の前に画像がなければ，数字をいじる必要はありません。このプログラムでは，時計の前に画像を置かない方がいいでしょう。
document.images[].srcを使わない，別な作り方すれば，影響がありません。例４を参考にして下さい。
4)numberh.gifは「時」の画像，numberm.gifは「分」の画像，numbers.gifは秒の画像です。
例４表示 ここをクリックして下さい。例が表示されます。
同じ表示でも，プログラムの作り方は，色々あります。色々な小技のテクニックを身につけていけばどこかで役立ちます。
娯楽室の各部屋
