アナログ時計

<!-- ========= for アナログ時計 ========= -->
<style type="text/css">
<!--
.posabs { position:absolute;left:-200px;top:0px; }
-->
</style>
<!-- ==================================== -->

<!-- ======================================================================
                            アナログ時計 Ver.0.04
                   http://homepage3.nifty.com/masas/sdir/
                 Copyright(c)2001 Masa, All Rights Reserved.
======================================================================= -->
<script type="text/javascript" language="JavaScript">
<!--
// ---------------------------------------------------------------------------
//                   時計の大きさや画像の設定 (ここから)
// ---------------------------------------------------------------------------
var POS_X_CENTER = 300;  // 時計の中心Ｘ座標（大きいほどページ右へ）
var POS_Y_CENTER = 200;  // 時計の中心Ｙ座標（大きいほどページ下へ）
var R_FRAME = 70;        // 時計の枠の半径

var LENGTH_HOUR = R_FRAME * 0.7;  // 短針(時)の長さ (枠の半径に対する割合)
var LENGTH_MIN  = R_FRAME * 0.9;  // 長針(分)の長さ (枠の半径に対する割合)
var LENGTH_SEC  = R_FRAME * 0.8;  // 秒針の長さ (枠の半径に対する割合)

var MAX_HOUR_IMG = 3;  // 短針(時)を何個の画像を並べて描くか
var MAX_MIN_IMG  = 4;  // 長針(分)を何個の画像を並べて描くか
var MAX_SEC_IMG  = 4;  // 秒針を何個の画像を並べて描くか

var FRAMEIMGNAME    = "frame.gif";   // 枠の画像ファイル名
var FRAMEIMGWIDTH   = 11;            // 枠の画像の幅
var FRAMEIMGHEIGHT  = 12;            // 枠の画像の高さ
var CENTERIMGNAME   = "center.gif";  // 中心の画像ファイル名
var CENTERIMGWIDTH  = 11;            // 中心の画像の幅
var CENTERIMGHEIGHT = 12;            // 中心の画像の高さ
var HOURIMGNAME     = "hour.gif";    // 短針(時)の画像ファイル名
var HOURIMGWIDTH    = 11;            // 短針(時)の画像の幅
var HOURIMGHEIGHT   = 12;            // 短針(時)の画像の高さ
var MINIMGNAME      = "minute.gif";  // 長針(分)の画像ファイル名
var MINIMGWIDTH     = 11;            // 長針(分)の画像の幅
var MINIMGHEIGHT    = 12;            // 長針(分)の画像の高さ
var SECIMGNAME      = "second.gif";  // 秒針の画像ファイル名
var SECIMGWIDTH     = 11;            // 秒針の画像の幅
var SECIMGHEIGHT    = 12;            // 秒針の画像の高さ
// ------------------------------------------------------------------------
//                   時計の大きさや画像の設定 (ここまで)
// ------------------------------------------------------------------------
function moveImage(id, x, y)
{
  if (document.layers) {
    document.layers[id].left = x;
    document.layers[id].top = y;
  } else if (document.all) {
    document.all[id].style.left = x+"px";
    document.all[id].style.top = y+"px";
  } else if (document.getElementById) {
    document.getElementById(id).style.left = x+"px";
    document.getElementById(id).style.top = y+"px";
  }
}
function init()
{
  // 各針のドット位置(半径)の算出
  for (j = 0; j < MAX_HOUR_IMG; j++) {
    r_hourimg[j] = Math.round(LENGTH_HOUR / MAX_HOUR_IMG) * (j + 1)
  }
  for (i = 0; i < MAX_MIN_IMG; i++) {
    r_minimg[i] = Math.round(LENGTH_MIN / MAX_MIN_IMG) * (i + 1)
  }
    for (k = 0; k < MAX_SEC_IMG; k++) {
    r_secimg[k] = Math.round(LENGTH_SEC / MAX_SEC_IMG) * (k + 1)
  }
  // 枠を描く(hidden)
  for (i = 0; i < 12; i++) {
    document.write('<div id="fram'+i+'" class="posabs">');
    document.write('<img src="'+FRAMEIMGNAME+'" width="'+FRAMEIMGWIDTH+'" height="'+FRAMEIMGHEIGHT+'"><\/div>');
  }
  // 時(短針)描画 (hidden)
  for (j = 0; j < MAX_HOUR_IMG; j++) {
    document.write('<div id="himg'+j+'" class="posabs">');
    document.write('<img src="'+HOURIMGNAME+'" width="'+HOURIMGWIDTH+'" height="'+HOURIMGHEIGHT+'"><\/div>');
  }
  // 分(長針)描画 (hidden)
  for (i = 0; i < MAX_MIN_IMG; i++) {
    document.write('<div id="mimg'+i+'" class="posabs">');
    document.write('<img src="'+MINIMGNAME+'" width="'+MINIMGWIDTH+'" height="'+MINIMGHEIGHT+'"><\/div>');
  }
  // 秒(秒針)描画 (hidden)
  for (k = 0; k < MAX_SEC_IMG; k++) {
    document.write('<div id="simg'+k+'" class="posabs">');
    document.write('<img src="'+SECIMGNAME+'" width="'+SECIMGWIDTH+'" height="'+SECIMGHEIGHT+'"><\/div>');
  }
  // 中心点を描く
  document.write('<div id="cent" class="posabs">');
  document.write('<img src="'+CENTERIMGNAME+'" width="'+CENTERIMGWIDTH+'" height="'+CENTERIMGHEIGHT+'"><\/div>');

  setInterval("mainProc()", 1000);
}
function moveClock(deg_h, deg_m, deg_s)
{
  // 時(短針)描画
  for (j = 0; j < MAX_HOUR_IMG; j++) {
    hourpx = POS_X_CENTER + r_hourimg[j] * Math.cos(deg_h * Math.PI / 180) - Math.floor(HOURIMGWIDTH / 2);
    hourpy = POS_Y_CENTER + r_hourimg[j] * Math.sin(deg_h * Math.PI / 180) - Math.floor(HOURIMGHEIGHT / 2);
    moveImage("himg"+j, hourpx, hourpy);
  }
  // 分(長針)描画
  for (i = 0; i < MAX_MIN_IMG; i++) {
    minpx = POS_X_CENTER + r_minimg[i] * Math.cos(deg_m * Math.PI / 180) - Math.floor(MINIMGWIDTH / 2);
    minpy = POS_Y_CENTER + r_minimg[i] * Math.sin(deg_m * Math.PI / 180) - Math.floor(MINIMGHEIGHT / 2);
    moveImage("mimg"+i, minpx, minpy);
  }
  // 秒(秒針)描画
  for (k = 0; k < MAX_SEC_IMG; k++) {
    secpx = POS_X_CENTER + r_secimg[k] * Math.cos(deg_s * Math.PI / 180) - Math.floor(SECIMGWIDTH / 2);
    secpy = POS_Y_CENTER + r_secimg[k] * Math.sin(deg_s * Math.PI / 180) - Math.floor(SECIMGHEIGHT / 2);
    moveImage("simg"+k, secpx, secpy);
  }
  if (firstdraw) {
    for (i = 0; i < 12; i++) {
      framepx = POS_X_CENTER + R_FRAME * Math.cos(360/12*i * Math.PI / 180) - Math.floor(FRAMEIMGWIDTH / 2);
      framepy = POS_Y_CENTER + R_FRAME * Math.sin(360/12*i * Math.PI / 180) - Math.floor(FRAMEIMGHEIGHT / 2);
      moveImage("fram"+i, framepx, framepy);
    }
    moveImage("cent", POS_X_CENTER - Math.floor(CENTERIMGWIDTH/2), POS_Y_CENTER - Math.floor(CENTERIMGHEIGHT/2));
    firstdraw = 0;
  }
}
// 時・分を獲得、角度に換算、描画関数をコール
function mainProc()
{
  // 時刻の獲得
  dd = new Date(); 
  hour = dd.getHours(); 
  if (hour > 12) { hour -= 12; }
  minute = dd.getMinutes(); 
  second = dd.getSeconds(); 
  // 角度換算
  deg_hour = (hour / 12 * 360) + (30 / 60 * minute) - 90;
  deg_minute = (minute / 60 * 360) - 90;
  deg_second = (second / 60 * 360) - 90;
  // 描画関数コール
  moveClock(deg_hour, deg_minute, deg_second);
}
var firstdraw = 1;
r_minimg = new Array();
r_hourimg = new Array();
r_secimg = new Array();
if (document.all || document.layers || document.getElementById) {
  init();
}
// -->
</script>
<!-- =================== End of アナログ時計 =================== -->