アナログ時計
右のような感じになります。(Netscape4以上, IE4以上)
下のソースの赤い所を変えると時計の大きさが変わります。
もちろんそれに応じた大きさの画像を用意する必要があります。
画像は、
文字盤："clockbg.gif" 縦100*横100
時針（●）："clockho.gif" 縦20*横20
分針（●）："clockmo.gif" 縦15*横15
秒針（●）："clockso.gif" 縦10*横10
をHTMLファイルと同じフォルダに置いて使用しています。
下のソースの青い所を変えると表示される位置が変わります。
ブラウザのバージョンが古いと表示されません。（エラーもでません・・・多分）
＜余談＞ たくさんのレイヤーを並べて直線を表してみました。表示の更新が１秒ごとなので２０枚程度の
レイヤーを使っても重くはないとは思うけど、どうでしょうか。絵は見ての通りＭＳペイントによるものです。お子さま的絵なのは分かってます。
使うときはちゃんとした絵に描き直して。
ソース（ちょっと長いですね・・・）
<HTML>
<HEAD>
<SCRIPT>
<!--
i=0; TID=10; i2=0; ww=500;
with(navigator){ // ブラウザのバージョンチェック
if(appVersion.indexOf("4.",0)!=-1) ver=4; // ver4
else if(appVersion.indexOf("5.",0)!=-1) ver=5; // ver5
else ver=3; // ver3以下
}
function setTOP(Mylay,y){ // レイヤー上位置
if(document.layers)document.layers[Mylay].top=y; // Netscape4以上用
if(document.all)document.all(Mylay).style.pixelTop=y; // IE4以上用
}
function setLEFT(Mylay,x){ // レイヤー左位置
if(document.layers)document.layers[Mylay].left=x; // Netscape4以上用
if(document.all)document.all(Mylay).style.pixelLeft=x; // IE4以上用
}
function setBGCOLOR(layName,color){ // 背景色
if(document.layers)document.layers[layName].bgColor=color; // Netscape4以上用
if(document.all)document.all(layName).style.backgroundColor=color; // IE4以上用
}
function setBGIMG(layName,image){ // 背景画像
if(document.layers)document.layers[layName].background.src=image // Netscape4以上用
if(document.all)document.all(layName).style.backgroundImage='url('+image+')'; // IE4以上用
}
function Clock3(){
Time = new Date();
clearTimeout(TID);
TID = setTimeout("Clock3()",1000);
if(i2==0 || Time.getSeconds()==0){ // 時針（１分ごとに更新）
i3=(30*Time.getHours()+0.5*Time.getMinutes())*3.14/180;
for(i=1;i<=6;i++){
str="h"+i;
setLEFT(str,Math.sin(i3)*(i-1)*spn/25+xx-1.5);
setTOP(str,-Math.cos(i3)*(i-1)*spn/25+yy-1.5);
}
setLEFT("ho",Math.sin(i3)*spn*0.3+xx-10);
setTOP("ho",-Math.cos(i3)*spn*0.3+yy-10);
}
if(i2==0 || Time.getSeconds()%10==0){ // 分針（１０秒ごとに更新）
i3=(6*Time.getMinutes()+0.1*Time.getSeconds())*3.14/180;
for(i=1;i<=9;i++){
str="m"+i;
setLEFT(str,Math.sin(i3)*(i-1)*spn/25+xx-1.5);
setTOP(str,-Math.cos(i3)*(i-1)*spn/25+yy-1.5);
}
setLEFT("mo",Math.sin(i3)*spn*0.4+xx-7.5);
setTOP("mo",-Math.cos(i3)*spn*0.4+yy-7.5);
}
if(i2==1){ // 秒針（１秒ごとに更新）
setLEFT("so", Math.sin(3.14*Time.getSeconds()/30)*spn*0.45+xx-5);
setTOP("so", -Math.cos(3.14*Time.getSeconds()/30)*spn*0.45+yy-5);
}
if(i2==0) i2=1;
}
function init(){
if(ver>3){
if(document.layers) ww=innerWidth;
else if(document.all) ww=document.body.clientWidth;
xx=ww-70; // 時計の中心のｘ座標
//(wwは、ウィンドウの横幅の値です。必要に応じて使用できます。)
yy=60; // 時計の中心のｙ座標
spn=100; // 時計の縦(横)幅
setLEFT("bg",xx-50); setTOP("bg",yy-50);
for(i=1;i<=6;i++){
str="h"+i; setBGCOLOR(str,"black");
}
for(i=1;i<=9;i++){
str="m"+i; setBGCOLOR(str,"black");
}
setBGIMG("bg","clockbg.gif");
setBGIMG("ho","clockho.gif"); setBGIMG("mo","clockmo.gif"); setBGIMG("so","clockso.gif");
Clock3();
}
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.bb { position:absolute; top:-100; left:-100; width:3; height:3; clip:rect(0,3,3,0); }
#bg { position:absolute; top:-100; left:-100; width:100; height:100; clip:rect(0,100,100,0); }
#ho { position:absolute; top:-100; left:-100; width:20; height:20; clip:rect(0,20,20,0); }
#mo { position:absolute; top:-100; left:-100; width:15; height:15; clip:rect(0,15,15,0); }
#so { position:absolute; top:-100; left:-100; width:10; height:10; clip:rect(0,10,10,0); }
<!---->
</STYLE>
</HEAD>
<BODY BGCOLOR=#ffdddd onLoad="init();">
********
ここの間に表示させる文字やタグを書く
********
<DIV ID="bg"></DIV><DIV ID="ho"></DIV>
<DIV ID="mo"></DIV><DIV ID="so"></DIV>
<DIV CLASS="bb" ID="h1"></DIV><DIV CLASS="bb" ID="h2"></DIV><DIV CLASS="bb" ID="h3"></DIV>
<DIV CLASS="bb" ID="h4"></DIV><DIV CLASS="bb" ID="h5"></DIV><DIV CLASS="bb" ID="h6"></DIV>
<DIV CLASS="bb" ID="m1"></DIV><DIV CLASS="bb" ID="m2"></DIV><DIV CLASS="bb" ID="m3"></DIV>
<DIV CLASS="bb" ID="m4"></DIV><DIV CLASS="bb" ID="m5"></DIV><DIV CLASS="bb" ID="m6"></DIV>
<DIV CLASS="bb" ID="m7"></DIV><DIV CLASS="bb" ID="m8"></DIV><DIV CLASS="bb" ID="m9"></DIV>
<IMG SRC="clockho.gif" WIDTH=1 HEIGHT=1>
<IMG SRC="clockmo.gif" WIDTH=1 HEIGHT=1>
<IMG SRC="clockso.gif" WIDTH=1 HEIGHT=1>
</BODY></HTML>
