![]() |
<!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> |