ＤＨＴＭＬ研究室

　

Back to Title Page(OpenLab)タイトルページへ戻る

ＤＨＴＭＬでタイマーを使用する。.

TITLE:ＤＨＴＭＬクロック

　ＤＨＴＭＬ＆ＪａｖａＳｃｒｉｐｔでグラフィカルな時計を作成してみました。文字グラフィクスデータを反転表示するためにビジュアルフィルターを使用しています。

　さらにリアルタイムで変化させるためにタイマースクリプトを追加します。
　タイマースクリプトのインターバルを開始するために、ＨＴＭＬの <BODY>タグで初期化関数を呼び出しています。ここで、タイマーインターバルを設定しています。

ここで使用しているグラフィックデータはここからダウンロードできます。

上のＤＨＴＭＬ部分のソースコードです。

<body onload="init()">

<img id="s0" src="sl.gif" style="filter:invert" width="24" height="24">
<img id="s1" src="sl.gif" style="filter:invert" width="24" height="24">
<img id="dc" src="dc.gif" style="filter:invert" width="24" height="24">
<img id="s2" src="sl.gif" style="filter:invert" width="24" height="24">
<img id="s3" src="sl.gif" style="filter:invert" width="24" height="24">
<img id="dc" src="dc.gif" style="filter:invert" width="24" height="24">
<img id="s4" src="sl.gif" style="filter:invert" width="24" height="24">
<img id="s5" src="sl.gif" style="filter:invert" width="24" height="24">

<script language="JavaScript">
function init(){
setInterval("style_change()",1000);
}
function style_change(){
now = new Date();
c=now.getHours(); style_change2(s0,c/10); style_change2(s1,c%10);
c=now.getMinutes(); style_change2(s2,c/10); style_change2(s3,c%10);
c=now.getSeconds(); style_change2(s4,c/10); style_change2(s5,c%10);
}
function style_change2(s,i){
switch(i&0x1f){
case 0 : s.src="00.gif"; break;
case 1 : s.src="01.gif"; break;
case 2 : s.src="02.gif"; break;
case 3 : s.src="03.gif"; break;
case 4 : s.src="04.gif"; break;
case 5 : s.src="05.gif"; break;
case 6 : s.src="06.gif"; break;
case 7 : s.src="07.gif"; break;
case 8 : s.src="08.gif"; break;
case 9 : s.src="09.gif"; break;
}
}
</script>

Copyright (C) Kitaro 1998