北極星(αUMi)
オリオン座ペテルギュ−ス(αOri)
オリオン座リゲル(βOri)
オリオン座(γOri)
オリオン座(δOri)
オリオン座(εOri)
オリオン座(ζOri)
オリオン座(κOri)
大熊座北斗七星(αUMa)
大熊座北斗七星(βUMa)
大熊座北斗七星(γUMa)
大熊座北斗七星(UMa)
大熊座北斗七星(εUMa)
大熊座北斗七星(ζUMa)
大熊座北斗七星(ηUMa)
白鳥座デネブ(αCyg)
白鳥座(γδCyg)
白鳥座(Cyg)
白鳥座(βε)
白鳥座(Cyg)
白鳥座(ζCyg)
カシオペア座(βCas)
カシオペア座(αCas)
カシオペア座(γCas)
カシオペア座(δCas)
カシオペア座(Cas)
双子座カストル(αGem)
双子座ポルックス(βGem)
双子座(ηGem)
双子座(γGem)
御車座カペラ(αAur)
雄牛座アルデバラン(αTau)
大犬座シリウス(αCMa)
南の魚座フォーマルハウト(αPsA)
琴座ベガ(αLyr)
牛飼い座アルクトゥルス(αBoo)
乙女座スピカ(αVir)
さそり座アンタレス(αSco)
鷲座アルタイル(αAql)
エリダヌス座アケルナル(αEri)
小犬座プロキオン(αCMi)
獅子座レグルス(αLeo)
竜骨座カノープス(αCar)
星の上にマウスを合わせると名前を表示
時 の星空です。
日時は希望の時に変更できます。
ようこそ
我が家の
Home
Page
ようこそ
我が家の
Home
Page

【JavaScriptのポイント】

プラネタリウム


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

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

鴈野さんちのHomePage TOPへ

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