アナログ式の時計を表示する

IE5.0以降のみ（Macintosh版IE5.0では正しく表示されない場合があります）

ダイナミックアニメーションを使うと、オブジェクトを自由に移動・回転することができます。ここでは、ダイナミックアニメーションを使ってアナログ式の時計を表示する方法を考えてみましょう。

■　時計を構成するオブジェクトの作成

時計を構成するオブジェクトを作成し、ダイナミックアニメーションの種類を設定します。

<IMG SRC="../../assets/images//clock06.gif" STYLE="position:absolute;top:195;left:195;width:160;height:160">
<OBJECT ID=short_hand STYLE="position:absolute;top:200;left:200;width:150;height:150;" CLASSID="clsid:369303c2-d7ac-11d0-89d5-00a0c90833e6">
</OBJECT>
<OBJECT ID=long_hand STYLE="position:absolute;top:200;left:200;width:150;height:150;" CLASSID="clsid:369303c2-d7ac-11d0-89d5-00a0c90833e6">
</OBJECT>
<OBJECT ID=second_hand STYLE="position:absolute;top:200;left:200;width:150;height:150;" CLASSID="clsid:369303c2-d7ac-11d0-89d5-00a0c90833e6">
<embed></embed></OBJECT>
<IMG SRC="../../assets/images/obj14-2.gif" STYLE="position:absolute;top:265;left:265;width:20;height:20">

■　時計の針の作成

JAVA Scrioptを使って、時計の針を画面上に直接描きます。

var ds1,ds2,ds3;
ds1=short_hand.DrawSurface;
ds2=long_hand.DrawSurface;
ds3=second_hand.DrawSurface;

ds1.fillcolor(short_hand.library.green);
ds1.rect(0,-8,4,-35);

ds2.fillcolor(long_hand.library.yellow);
ds2.rect(0,-8,3,-55);

ds3.fillcolor(second_hand.library.white);
ds3.rect(0,-8,2,-55);

長方形を描くには、<OBJECT>タグで作成したオブジェクトの中心を基点に「rect（ｘ座標, ｙ座標, 幅, 高さ）」の形式でパラメータを指定します。

■　現在の時刻の表示

本日が始まってからの秒数を取得し、秒数に6、10分の1、120分の1の値を書けることで「秒針」「長針」「短針」を回転する角度を計算して時計の時刻あわせを行います。

var now;
now = new Date();
position = now.getHours()*3600+now.getMinutes()*60+now.getSeconds();

second_hand.rotate(0,0,6*position);
long_hand.rotate(0,0,1/10*position);
short_hand.rotate(0,0,1/120*position);

この処理によって、時刻が「1時30分0秒」の場合には午前0時0分0秒の各針の状態から、「短針」は45度、「長針」は180度、「秒針」は0度回転した位置に表示されます。

■　時刻を更新する関数の設定

「rotate」メソッドを津あって、1秒ごとに「秒針」を6度、「長針」を0.1度、「短針」を120分の1度回転し、時計の時刻を更新します。

clock();
function clock(){
second_hand.rotate(0,0,6);
long_hand.rotate(0,0,1/10);
short_hand.rotate(0,0,1/120);
window.setTimeout("clock()",1000);
}
function reload(){
if(location.search==""){location.href="gazou053.htm?R"}
}

例では、ダイナミックアニメーションを使って、アナログ式の時計を表示しています。このスクリプトではダイナミックアニメーションの回転（rotate）機能を使って、時計の針を動かすのがポイントです。
表示した時計は、「setTimeout」メソッドを使って簡易的に時刻を管理しているため、長時間表示しておくと時計がずれてしまうので、注意が必要です。

■　ページのリロード

ダイナミックアニメーションを使ってオブジェクトを描画すると、環境によっては一部のオブジェクトが表示されないことがあります。この問題は「location.href」を使ってページ表示後に1回リロード（再読み込み）することで回避できます。
例では、この問題を解決するために、ページをリロードしています。

<<<戻る