<!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>
<DIV STYLE="position:relative; width:199px; height:199px">
<DIV ID="face" STYLE="position:absolute; left:0; top:0; width:199px; height:199px; background-image:url(images/clock1.gif)"></DIV>
<IMG SRC="images/clock2.gif" WIDTH=7 HEIGHT=7 STYLE="position:absolute; left:96px; top:96px">
</DIV>
</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 分毎
// 短針
for(var i = 0; i < hour.length; i++)
elem_face.removeChild(hour[i]);
var a = (date.getHours() * 20 + date.getMinutes() / 3) * Math.PI / 120;
var x = 56 * Math.sin(a);
var y = -56 * Math.cos(a);
hour = line(Math.round(x / -6), Math.round(y / -6), Math.round(x), Math.round(y), 7, "#006600");
}
// 長針
for(var i = 0; i < min.length; i++)
elem_face.removeChild(min[i]);
var a = (date.getMinutes() * 4 + date.getSeconds() / 15) * Math.PI / 120;
var x = 80 * Math.sin(a);
var y = -80 * Math.cos(a);
min = line(Math.round(x / -8), Math.round(y / -8), Math.round(x), Math.round(y), 5, "#006600");
}
// 秒針
for(var i = 0; i < sec.length; i++)
elem_face.removeChild(sec[i]);
var a = date.getSeconds() * Math.PI / 30;
var x = 72 * Math.sin(a);
var y = -72 * Math.cos(a);
sec = line(Math.round(x / -4), Math.round(y / -4), Math.round(x), Math.round(y), 2, "#FF3300");
last_date = date;
}
}
function line(x1, y1, x2, y2, size, color) {
var nodes = [];
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;
if(dx >= dy) {
for(var cnt = dx; cnt; cnt--) {
// Internet Explorer 5 では push() が使えない
// nodes.push(point(x1, y1, size, color));
nodes = nodes.concat([point(x1, y1, size, color)]);
if((rem += dy) >= dx) {
y1 += yi;
rem -= dx;
}
x1 += xi;
}
}
else {
for(var cnt = dy; cnt; cnt--) {
// nodes.push(point(x1, y1, size, color));
nodes = nodes.concat([point(x1, y1, size, color)]);
if((rem += dx) >= dy) {
x1 += xi;
rem -= dy;
}
y1 += yi;
}
}
return nodes;
}
function point(x, y, size, color) {
var node = document.createElement("SPAN");
node.style.position = "absolute";
node.style.left = String(x + 99 - ((size - 1) >> 1)) + "px";
node.style.top = String(y + 99 - ((size - 1) >> 1)) + "px";
node.style.width = String(size) + "px";
node.style.height = String(size) + "px";
node.style.backgroundColor = color;
node.style.overflow = "hidden"; // Internet Explorer で必要
elem_face.appendChild(node);
return node;
}
elem_face = document.getElementById("face");
last_date = new Date(0);
hour = [];
min = [];
sec = [];
//-->
</SCRIPT>
</BODY>
</HTML>
|