■ clock.htm ■

戻る 

<!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>