【JavaScriptのポイント】

プラネタリウム

星空を表示する空の絵は真夜中用の黒い空、昼間用の水色の空など４種類を用意し、時間によりイメージを入れ替えます。空を表示するレイヤ(div)はstyle2を使ったIDがB1のものです。空の絵には東西南北の字も埋め込まれており、半円の外側は透過色になっており後ろの文字などが見えるようになっています。
星は43個用意されており、それぞれのデータは赤経に相当する角度(Rec:赤経を360°で表示)、赤緯に相当する北極からの距離(Dis:赤緯90°を0、-90°を180とする)、明るさ(0,1,2等星)、星の名前を持ち、それぞれIDがS0～S42のレイヤにそれぞれの明るさに応じた星の絵0.gif～2.gifを貼り付けておく。この時imgタグのaltに星の名前を指定しているため表示時にマウスを星に合わせるとポップアップで星の名前が表示される。
表示する星空の月･日･時をselectから読み込むと同時にselectに表示するようにしてあるので、selectで変更すれば希望の日時の表示をさせることができると同時に自動更新された表示中の星空の時刻も分かる。
ロードが終わると現在日時を selectに設定した後Disp()関数が呼ばれる。 Disp()関数はselectから時刻を読み取った後、それぞれの星毎に月日時と赤経データから星空上の角度を計算し、赤緯データを使って星空上の星のx位置、y位置を計算する。y位置が-45より小さい星は空に現れないためvisibilityをhidden/hideに変更する。星空上に見える星はvisibilityをinheritにし、x,y位置に星をMoveTo()関数を使って移動する。
全部の星の表示処理が終われば2秒後に次の表示をするためタイマを起動する。
2秒のタイムアウトが来るとselectに表示されている月日時を10分進め(分の表示は無い)、selectに設定後Disp()関数を呼び次の時刻の星空の表示をする。(時刻が2秒ごとに10分進んだ星空が自動表示されていく)
時刻更新停止ボタンを押すとタイマがクリアされ、自動更新がストップする。
自動時刻更新ボタンを押すとタイマを起動し、タイムアウト後selectで指定された日時の星空を表示後再度タイマが起動され以降2秒ごとに10分進んだ星空が自動表示されていく。

Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

ご感想などは鴈野敏生まで。