星の表示

ランダムに星を表示します。IE用です。

これが、あらかじめ用意してある画像です。★

こちらが、サンプルです。

肝心なトコロのソース表示です。

<body style="background-color:black">
<script type="text/javascript">
<!--
for (i=0; i<16; i+=.4){
x=Math.random()*800;
y=Math.random()*600;
v='<img src="image/star_1.png" style="position:absolute; left:'+x+'; top:'+y+'" width="'+i+'">'
document.write(v)
}
//-->
</script>
</body>

解説です。

<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 : ホームに戻る

Presented by Rei

Gポイントポイ活 Amazon Yahoo 楽天

無料ホームページ 楽天モバイル[UNLIMITが今なら1円] 海外格安航空券 海外旅行保険が無料!