Home > CGI > デジタル時計
サンプル
JavascriptのDateオブジェクトを使って時間を参照し、各数字に対応した画像を表示しているだけのシンプルなデジタル時計。
まず0～9の数字画像と時間を区切る：の画像を用意します。
サンプルで使用している画像はコレです。
次に下のソースをコピーして表示したいところに貼り付けてください。
<script type="text/javascript"> <!-- document.write('<img src="0.gif" name="p1"><IMG src="0.gif" name="p2">'); document.write('<img src="ten.gif" name="p7"><IMG src="0.gif"name="p3"><IMG src="0.gif" name="p4">'); document.write('<img src="ten.gif" name="p8"><IMG src="0.gif" name="p5"><IMG src="0.gif" name="p6">'); function time(){ data = new Date(); h = data.getHours(); h2 = h % 10; h1 = (h-h2) / 10 ; m = data.getMinutes(); m2 = m % 10; m1 = (m-m2) / 10; s = data.getSeconds(); s2 = s % 10; s1 = (s-s2) / 10; document.p1.src = h1 + ".gif"; document.p2.src = h2 + ".gif"; document.p3.src = m1 + ".gif"; document.p4.src = m2 + ".gif"; document.p5.src = s1 + ".gif"; document.p6.src = s2 + ".gif"; document.p7.src = "ten.gif"; document.p8.src = "ten.gif"; } setInterval("time()",1000); // --> </script>
そしてデジタル時計で使用する画像をソースを貼り付けたHTMLと同じディレクトリにアップしてください。
最後にブラウザで動作確認して終わりです。