<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="ja">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<TITLE>アナログ時計</TITLE>
</HEAD>
<BODY BGCOLOR="#CCFFFF" onLoad="setInterval(timer, 100)">
<BR><BR><BR>
<CENTER>
<TABLE><TR><TD>
<ILAYER NAME="face" WIDTH=199 HEIGHT=199>
<IMG SRC="images/clock1.gif" WIDTH=199 HEIGHT=199 ALIGN=TOP>
<LAYER NAME="hour" WIDTH=199 HEIGHT=199 LEFT=0 TOP=0>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
for(cnt = 65; cnt; cnt--)
document.write("<LAYER WIDTH=7 HEIGHT=7 LEFT=0 TOP=0 BGCOLOR='#006600' VISIBILITY='hide'></LAYER>");
//-->
</SCRIPT>
</LAYER>
<LAYER NAME="min" WIDTH=199 HEIGHT=199 LEFT=0 TOP=0>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
for(cnt = 90; cnt; cnt--)
document.write("<LAYER WIDTH=5 HEIGHT=5 LEFT=0 TOP=0 BGCOLOR='#006600' VISIBILITY='hide'></LAYER>");
//-->
</SCRIPT>
</LAYER>
<LAYER NAME="sec" WIDTH=199 HEIGHT=199 LEFT=0 TOP=0>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
for(cnt = 90; cnt; cnt--)
document.write("<LAYER WIDTH=2 HEIGHT=2 LEFT=0 TOP=0 BGCOLOR='#FF3300' VISIBILITY='hide'></LAYER>");
//-->
</SCRIPT>
</LAYER>
<LAYER WIDTH=7 HEIGHT=7 LEFT=96 TOP=96>
<IMG SRC="images/clock2.gif" WIDTH=7 HEIGHT=7 ALIGN=TOP>
</LAYER>
</ILAYER>
</TD></TR></TABLE>
</CENTER>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
function timer() {
var date = new Date();
date.setMilliseconds(0);
if(date.getTime() != last_date.getTime()) { // 秒が変わった
if(Math.floor(date.getTime() / 15000) != Math.floor(last_date.getTime() / 15000)) { // 15 秒毎
if(Math.floor(date.getTime() / 180000) != Math.floor(last_date.getTime() / 180000)) { // 3 分毎
// 短針
var a = (date.getHours() * 20 + date.getMinutes() / 3) * Math.PI / 120;
var x = 56 * Math.sin(a);
var y = -56 * Math.cos(a);
line(document.face.document.hour.document, Math.round(x / -6), Math.round(y / -6), Math.round(x), Math.round(y), 7);
}
// 長針
var a = (date.getMinutes() * 4 + date.getSeconds() / 15) * Math.PI / 120;
var x = 80 * Math.sin(a);
var y = -80 * Math.cos(a);
line(document.face.document.min.document, Math.round(x / -8), Math.round(y / -8), Math.round(x), Math.round(y), 5);
}
// 秒針
var a = date.getSeconds() * Math.PI / 30;
var x = 72 * Math.sin(a);
var y = -72 * Math.cos(a);
line(document.face.document.sec.document, Math.round(x / -4), Math.round(y / -4), Math.round(x), Math.round(y), 2);
last_date = date;
}
}
function line(base, x1, y1, x2, y2, size) {
var dx = Math.abs(x2 - x1);
var dy = Math.abs(y2 - y1);
var rem = 0;
var xi = (x1 < x2) ? 1 : -1;
var yi = (y1 < y2) ? 1 : -1;
x1 += 99 - ((size - 1) >> 1);
y1 += 99 - ((size - 1) >> 1);
var i_p = 0;
if(dx >= dy) {
for(; i_p < dx; i_p++) {
base.layers[i_p].moveTo(x1, y1);
base.layers[i_p].visibility = "show";
if((rem += dy) >= dx) {
y1 += yi;
rem -= dx;
}
x1 += xi;
}
}
else {
for(; i_p < dy; i_p++) {
base.layers[i_p].moveTo(x1, y1);
base.layers[i_p].visibility = "show";
if((rem += dx) >= dy) {
x1 += xi;
rem -= dy;
}
y1 += yi;
}
}
for(; i_p < base.layers.length; i_p++)
base.layers[i_p].visibility = "hide";
}
last_date = new Date(0);
//-->
</SCRIPT>
</BODY>
</HTML>
|
