雪が
降り始め
やがて強くなり
積もり
止み
太陽が出
溶ける


























ようこそ 我が家の Home Page へ
【JavaScriptのポイント】

雪降り


  1. 雪が降る絵の画面をtableの中央の欄に配置し、この欄の周りのbgcolorは白にします。雪の降る画面の背景絵はtableのbackgroundで指定し、空は透過色が指定されているため、 表示時にはbodyのbgcolorが透けて見えます。この背景の絵に雪や積もった雪、湯気などが横長のImageとして25枚貼り付けてあります。
  2. 雪はタイマで設定した時間がくるたびに最下部からImageを一つ上のImageで置き換え、最上部のImageを雪のImageに置き換えることで雪が下に移動していきます。
  3. 雪は下に降るようにみせるためs1.gifとs2.gif、雪の無いs0.gifのImageを順に最上部に表示し、次ぎのタイムアウトで一つ下へ移動します。またちらちら感を出すためs1.gifはs3.gifと交互に入れ替えます。
  4. 降雪量をカウントし、降雪量と共にタイマ間隔を変更し激しく降らせたり小降りにしたりを制御します。同時にbgcolorも変更し背景の空の色を暗くしたり明るくしたりします。
  5. また降雪量にしたがって最下部から積雪のImageを表示します。
  6. 積雪量が8段階目にきたところで降雪を終了します。だんだんと雪を間引いて最後に完全に止みます。
  7. 上から太陽のImageを表示すると同時に積雪部の上に湯気のImage u0.gif,u1.gifを交互に表示し、時間と共に積雪量を減らして行きます。
  8. 積雪量が無くなると太陽も隠れ、これで1サイクル終りです。また始めから降り始めます。
  9. 絵の右側のボタンを押すと上記のプロセスを途中で止め降雪開始、融雪開始のところへ移るようになっています。

Java Script事例集トップページへ
鴈野さんちのHomePage TOPへ
ご感想などは鴈野 敏生 まで。