 関数部分
タイトルどおり画像を用いたグラフィカルな時計です。
見た目だけはいいです。
1-9の画像と、コロンの画像(coron.gif)をご用意下さい。
<SCRIPT Language="JavaScript">
<!--
if(document.images) {
var clockimgdir = "images/"; //数字画像が保存されているディレクトリまでの相対パス。
var clockcolon = "colon.gif"; //コロン「：」画像のファイル名
var num = new Array()
for(i=0; i<=9; i++) {
num[i] = new Image(); num[i].src = clockimgdir +i+ ".gif";
}
}
function ClockImage() {
if(document.images) {
var now =new Date()
var h = new String(now.getHours()); if(eval(h) <10) h = "0"
+h;
var m = new String(now.getMinutes()); if(eval(m) <10) m = "0"
+m;
var s = new String(now.getSeconds()); if(eval(s) <10) s = "0"
+s;
document.hou0.src = num[h.charAt(0)].src;
document.hou1.src = num[h.charAt(1)].src;
document.min0.src = num[m.charAt(0)].src;
document.min1.src = num[m.charAt(1)].src;
document.sec0.src = num[s.charAt(0)].src;
document.sec1.src = num[s.charAt(1)].src;
setTimeout('clockImage()',1000);
}
}
//-->
</SCRIPT>
呼出部分
下<body>内で関数（※小文字大文字区別します）を呼び出します。
<body onLoad="ClockImage()">
もしくは、<head>内で外部ファイルを呼び出して、<body>内で呼び出しっつー手も。このページではそうやってます。
<script language="javascript">
<!--
if(document.images) {
document.write("<img src='"+dir+"0.gif' name='hou0'>");
document.write("<img src='"+dir+"0.gif' name='hou1'>");
document.write("<img src='"+dir+colon+"'>");
document.write("<img src='"+dir+"0.gif' name='min0'>");
document.write("<img src='"+dir+"0.gif' name='min1'>");
document.write("<img src='"+dir+colon+"'>");
document.write("<img src='"+dir+"0.gif' name='sec0'>");
document.write("<img src='"+dir+"0.gif' name='sec1'>");
}
//-->
</script>
ﾍﾀﾚ考察ﾒﾓ
・ステータスバーではなく、普通にテキストとして表示させるにはどうすればよいのか。・色々弄ってみたけどsetTimeoutで1秒毎に更新してるから結局onload以外呼出方法が無い？・関数内にdocument.write(日付情報)を記述して、表示させたい場所で関数呼び出したけどダメ。・<body
onload="関数">で呼び出して、表示させたい場所にdocumant.write(日付情報)もダメ。・あー、結局関数内でwriteもsetTimeoutも記述しないといかんから分離できないのかなぁ。・setTimeoutがなければ、writeで普通に表示できるんだけど…リアルタイムじゃないと意味ねーし。・formで出す方法がある？
むぅ、あー、眠くてよくわかんね、まぁ引き続き調査続行と言う事で。
|
