デジタル時計
について
About Digital Clock
DDJ日本版ホーム
翔泳社ホーム
翔泳社PC出版ホーム
Description
トップページの時計は，JavaScriptで作ったものです．
ソースコードの中で
<![CDATA[
document.images[nImgs + 0].src = dir + digitName[hour.substring(0, 1)];<p>
]]>
のあたりが，Netscape Navigator 3.0（以上？）でしか正しく動作しないようです．
そのため，下のような条件判定によって，
それ以外のブラウザの場合は何も表示しないようにしてあります．
<![CDATA[
if (navigator.appName == 'Netscape')
if (navigator.appVersion.substring(0, 1) == 3){
]]>
数字に使っている画像は，Nathan Robinsonさん（mail-to:
katt@kattnet.com）
が作成したもので，
『The Digit Collection』 (http://www.webdigits.com)
で配布されています．
ここで使っている数字のほかにも，
150以上のデザインの数字が提供されています．
Source Code
<![CDATA[
<script language="JavaScript">
<!--
if (navigator.appName == 'Netscape')
if (navigator.appVersion.substring(0, 1) == 3){
var imgTag = "<img src=images/digits/zero.gif width=20 height=24" +
' align="middle" border=0>';
var colon = "<img src=images/digits/colon.gif width=20 height=24" +
' align="middle" border=0>';
document.write('<a href="clock.html">');
document.write('<center>');
document.write(imgTag);
document.write(imgTag);
document.write(colon);
document.write(imgTag);
document.write(imgTag);
document.write(colon);
document.write(imgTag);
document.write(imgTag);
document.write('</center>');
document.write('</a>');
}
function Clock()
{
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var nImgs = 1; // number of images appear befor clock
var dir = "images/digits/"; // directory contains digit images
var digitName = new Array(10);
digitName[0] = "zero.gif";
digitName[1] = "one.gif";
digitName[2] = "two.gif";
digitName[3] = "three.gif";
digitName[4] = "four.gif";
digitName[5] = "five.gif";
digitName[6] = "six.gif";
digitName[7] = "seven.gif";
digitName[8] = "eight.gif";
digitName[9] = "nine.gif";
if (hour < 10) hour = "0" + hour;
if (min < 10) min = "0" + min;
if (sec < 10) sec = "0" + sec;
// convert numbers to strings
hour = "" + hour;
min = "" + min;
sec = "" + sec;
// NOTE!!!
// 'document.images[0].src' is implemented only by
// Netscape Navigator 3.0 (or later?).
document.images[nImgs + 0].src = dir + digitName[hour.substring(0, 1)];
document.images[nImgs + 1].src = dir + digitName[hour.substring(1, 2)];
document.images[nImgs + 2].src = dir + "colon.gif";
document.images[nImgs + 3].src = dir + digitName[min.substring(0, 1)];
document.images[nImgs + 4].src = dir + digitName[min.substring(1, 2)];
document.images[nImgs + 5].src = dir + "colon.gif";
document.images[nImgs + 6].src = dir + digitName[sec.substring(0, 1)];
document.images[nImgs + 7].src = dir + digitName[sec.substring(1, 2)];
// call 'Clock()' function after 999msec passed.
setTimeout('Clock()', 999); // 1000msec = 1sec
}
// -->
</script>
<script>
<!--
if (navigator.appName == 'Netscape')
if (navigator.appVersion.substring(0, 1) == 3)
Clock();
// -->
</script>
]]>