星を降らせる

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  星を降らせるには星の数だけdocument.write()を使いimgタグを書き出します。この時にスタイルシートも同時に指定します。星の移動でページ外になったかどうかを調べて元に戻すのに剰余を利用します。剰余を利用するとif命令を使わず簡潔に記述することができます。
コード <html> <head> <title>星を降らせる</title> </head> <body bgcolor="black" text="white" background="bg.jpg" onLoad="setInterval('star()',100)"> 星が降ります。 <script langauge="JavaScript"><!-- count = 20,starSize = 16; // 星の数、星のサイズ starX = [],starY = [],speed = []; // 星のX,Y座標、星の速度 function star() { for (i=0; i<count; i++) { document.images["img"+i].style.left = dW - (starX[i] += speed[i] * 4) % dW; document.images["img"+i].style.top = (starY[i] += speed[i] *10) % dH; } } for (i=0; i<count; i++) { starX[i] = Math.random() * (dW = document.body.clientWidth); starY[i] = Math.random() * (dH = document.body.clientHeight); speed[i] = Math.random() + 1; document.write("<img src='star.gif' name='img"+i+"' style='position:absolute;top:0px;left:0px;'>"); } // --></script> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!