clock_n4.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>
<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>