ランダムに星を表示します。IE用です。
これが、あらかじめ用意してある画像です。
こちらが、サンプルです。
肝心なトコロのソース表示です。
解説です。
<body style="background-color:black"></body>
BODYのbackgroundを設定することにより、バックを黒にしています。
<script type="text/javascript">
<!--
//-->
</script>
JavaScriptを書く時の呪文です。
for (i=0; i<16; i+=.4){
}
forで繰り返しです。iの値を星の大きさにしてます。0から始まって、0.4ずつ16まで繰り返しています。ここの数字を変えれば、大きさや数が変わります。
x=Math.random()*800;
y=Math.random()*600;
Math.random()により、乱数を作ってます。横800,縦600の範囲内になるようにしてます。*800,*600を大きくすれば、広範囲に星が表示されます。
数値は、小数点ですが、表示されています。x=Math.ceil(x)等にすれば、整数になります。
v='<img src="image/star_1.png" style="position:absolute; left:'+x+'; top:'+y+'" width="'+i+'">'
v= HTMLの中身を入れます。直接document.writeの中に入れてもいいですけど、一行が長くなるので、変数にいったん入れています。
<img src="image/star_1.png" で、星を指定しています。
style="position:absolute; で位置指定を絶対座標にしています。
left:'+x+'; 横位置の指定です。さっき作った乱数xを入れています。
top:'+y+'" 縦位置の指定です。これで、styleの指定は終りです。
width="'+i+'">' forのiを大きさとして、width(横幅)に指定しています。widthだけだと、自動的に縦も、横の大きさに合わせて変わります。でも、heightを付けたほうが親切かも知れません。
document.write(v)
↑で作ったvを表示しています。
Next : 次のサンプルへ Rev : 前のサンプルへ Up : JavaScript-Sampleに戻る Home : ホームに戻る