ホームページを作成に関する備忘録
JavaScriptと画像を用いたリアルタイムクロック
Xhtmlファイル
<?xml version="1.0" encording="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script language="javascript" type="text/javascript" src="realclock.js">
</script>
</head>
<body onload="setInterval('realTime()',1000)">
<div>
<p><img src="image/number/clock_title.png" alt="" height="25"
width="80" />
</p>
<img src="image/number/pm.png" alt="" id="RT6"/>
<img src="image/number/0.png" alt="" id="RT0"/>
<img src="image/number/1.png" alt="" id="RT1"/>
<img src="image/number/kugirih.png" alt=""/>
<img src="image/number/2.png" alt="" id="RT2"/>
<img src="image/number/3.png" alt="" id="RT3"/>
<img src="image/number/kugirim.png" alt=""/>
<img src="image/number/4.png" alt="" id="RT4"/>
<img src="image/number/5.png" alt="" id="RT5"/>
<img src="image/number/kugiris.png" alt=""/>
</div>
</body>
</html>
jsファイル(realclock.js)
baseURL = "image/number/";
ext = ".png";
(new Image()).src = baseURL + "6.png";
(new Image()).src = baseURL + "7.png";
(new Image()).src = baseURL + "8.png";
(new Image()).src = baseURL + "9.png";
function realTime(){
dt = new Date();
h12 = dt.getHours();
if (h12>12){h12=h12-12};
h = "0" + h12;
h = h.substring(h.length-2,h.length);
m = "0" + dt.getMinutes();
m = m.substring(m.length-2,m.length);
s = "0" + dt.getSeconds();
s = s.substring(s.length-2,s.length);
if (dt.getHours()<12){document.images["RT6"].src = baseURL + "am.png";}
else{document.images["RT6"].src = baseURL + "pm.png";}
times = [h.charAt(0),h.charAt(1),m.charAt(0),m.charAt(1),s.charAt(0),s.charAt(1)];
for (i=0; i<6; i++) document.images["RT"+i].src = baseURL + times[i] + ext;
}
まずは、時計の数字の画像を用意する。ここの画像の大きさは任意。私は縦20px、横10pxほどの画像にした。ファイル名は必ず0〜9.pngにする。
画像ファイルはリンクを右クリックして保存。
XHtml
仕組みは、imageタグのsrc属性をJavaScriptを使って1秒ごとに画像(0.png〜9.png）を書き換えているだけ。bodyタグのonload = "setInterval('realTime()', 1000)"の部分が1秒ごとに関数を呼び出している部分。また、24時間制ではなく12時間制の時計にしているので、午前と午後で「ＡＭ」「ＰＭ」が置き換わるようにした。このファイルについても、am.pngとpm.pngにする。これらの画像ファイルは、htmlファイルのあるフォルダにimageフォルダを作り、その中にnumberフォルダを作成して入れておく。画像を入れるフォルダを変える場合は、それぞれ、htmlのコードとjavascriptのコードを変更しないといけない。時計にある「時」や「分」などはそれぞれ任意の画像でよい。画像ファイルには区切りとして「：」も入れてあるので、それで置き換えても良い（html中のkugirih.png「時」やkugirim.png「分」など）
JavaScript
baseURL = "image/number/";の部分は、時計の画像ファイルのあるフォルダを指定する。
ext = ".png";は画像ファイルの拡張子を入れる。gifファイルならばpngの部分をgifに置き換える。
if (h12>12) {h12=h12-12};は24時間制ならば必要なし。
if (dt.getHours()<12) {document.images["RT6"].src = baseURL + "am.png";}
else {document.images["RT6"].src = baseURL + "pm.png";}も24時間制ならば必要なし。
ということで、それほど複雑ではない仕組みです。いろいろと画像ファイルを変えて楽しんでみましょう。
