4.もっと増やしてみる

4-1 星がいっぱい

星の数をもっと増やしてみましょう。基本は、命令をどんどん書いていけば良いわけですが、まともにやると、すごく大変です。そこで、ちょっと工夫をして見ます。

4-2 星がいっぱいのサンプル

ここに、ブログパーツを貼っています。本体は見えませんが、星がいっぱい降っていると思います。

4-3 ソースコード


<script type="text/javascript"><!--
var n=20;
var i;
var y = new Array();
var ts = new Array();
document.open();
for(i=0;i<n;i++)
{
	document.write('<font color="#eeee33" size="20" id="text'+i+'">★</font>');
}
document.close();
for(i=0;i<n;i++)
{
	y[i] = 0;
	ts[i] = document.getElementById("text"+i).style;
}
setInterval(
	function()
	{
		for(i=0;i<n;i++)
		{
			ts[i].position = 'absolute';
			ts[i].top = y[i]+'px';
			ts[i].left = (i*50)+'px';
			y[i] += 20;
			if(y[i]>600) y[i] = 0;
		}
	}
,100);
void(0)
// --></script>

4-4 ソースコードの解説

まともに書くと、ソースコードが無駄に長くなるので、配列変数を使って、短く書いています。内容的には、命令をいっぱい書くのと、まったく同じですが、こう書いておくと改造が便利です。例えば、最初の var n=20; の部分を変えるだけで、簡単に星の数を増やせます。

ポイント1
配列は、var y = new Array();で作ります。y[番号]でアクセスできます。

ポイント2
今まで、fontタグはjavascriptの外に書いていましたが、今回は中から書いています。
document.open();
document.write('何かの文章');
document.close();

この命令で、文章やタグをjavascriptからhtmlへ埋め込めます。javascriptの範囲に入ったので、for文などを使って連続描写できます。

このサンプルを改造して、自分のブログパーツを作りたいって人がいたら、自由に使ってくれてOKです。

< 3.ちょっと改造してみる □ ホームページ □ 5.ランダムに表示してみる >