← 動くイラストのトップ
１：時計の文字盤になる画像を作る
正確に12等分し、中心に、+ 印を入れた
画像を作るか、
右クリックで、この画像を取り込み
clock.gifの名前で保存する		 中心●の位置を探すため必ず + 印を入れておく
２：clock.gifを表示する位置を決める

ブラウザ(IEやgoole Chromeなど)の表示サイズに影響されないように絶対位置(abusolute)で、設定する
文字盤(clock.gif)の短針、長針、秒針の支点位置を設定する
３：アナログ時計のソース

  ２：で決めたclock.gifの位置=left top  と◎の位置=ue hidariを 下のソース中で ←書き換える と表示している部分を書き換える

上のソースをすべて選択コピー貼り付けし、拡張子htmlで、c.htmlの名前でclock.gifと同じフォルダに保存し実行してみる
ソース実行結果

４：解説
<body onload="tokei()">読込みを完了したら自動的にジャバスクリプトのfuntion tokei()に飛ぶ
function tokei(){myInterval=setInterval("Nowtime()",1000);}>1/1000秒ごとにfuntion Nowtime()
function Nowtime(){
Now=new Date();
S=Now.getSeconds()-15;
M=Now.getMinutes()+45;
H=(Now.getHours()+9)+(Now.getMinutes()/60);
Now=new Date(); 現在の日付、時刻を呼び出す
S=Now.getSeconds
()-15;		 現在の秒数を取り出す
0秒は、角度が0度の水平位置で15秒になるので、
-15減らす
分も同様に+45か-15にする
M=Now.getMinutes()+45
H=(Now.getHours()+9) 0時も角度0度で、360度を１２等分した水平の3時になるので、
3時に9をプラスして12にし、垂直の90度になるようにする
+(Now.getMinutes()/60); 分を時に加算して、短針の位置を調整
H=(Now.getHours()+9)+(Now.getMinutes()/60);
r = 半径  (例：分針）
for(i=0;i<4;i++){
mx=hidari + Math.cos(Math.PI*2/60*M)*
(i*Mi+Mi);
分針の場合(i*Mi+Mi)が、半径の部分、同様に(i*Si+Si)が秒針
(i*Hi+Hi)が時針の r =半径の部分

ｒ(半径)は、分針の間隔が12だから、(i*12+12)で i が4になるまでなので、 半径の数値は24、36、48、60と変化し●は、４箇所に表示する。
５：針の位置12等分した三角形
a,bの長さを求める公式
弧L= 2πｒ ｘ ｒ÷12ｘ1
ラジアン= Ｌ÷ｒ
度θ= ラジアン x 180÷π
ａ= ｃｏｓ（θ）ｘ ｒ
ｂ= ｃｏｓ（θ）ｘ ｒ
javascript書式
a = 半径 * Math.cos(度/ 180 * Math.PI);
b = 半径 * Math.sin(度 / 180 * Math.PI);
(a,b)を導きだす公式  例：文字盤の半径（ｒ）が３０で、１０時２４分の短針位置
H=(Now.getHours()+9)+(Now.getMinutes()/60)
H=(10+9)+(24/60)
H=19.4
弧=2x3.14x30/12*19.4
ラジアン=弧/半径
ラジアン=(2x3.14x30/12*19.4)/30
度(θ)=360°*弧の長さ)/(2πR)
度(θ)=(360x2x3.14x30/12*19.4)/(2x3.14x30)
中心からleft=cos((360*2*3.14*30/12*19.4)/(2*3.14*30)/180*3.14)*30
中心からtop=sin((360*2*3.14*30/12*19.4)/(2*3.14*30)/180*3.14)*30
-22.39742095=cos(2*3.14/12*19.4)*30
-19.95884603=sin(2*3.14/12*19.4)*30
動くイラストのトップ