7.停止ボタンを付ける

7-1 停止ボタン

降ってくる星を、止めたりできるようにしてみましょう。また、今までは、ページが表示されるのと同時に、すぐに星が降ってきましたが、今回は、最初は非表示にして見ます。

7-2 停止ボタンのサンプル

ここに、ブログパーツを貼っています。今回はボタンがあります。クリックすると、星が降り始めると思います。もう1度クリックすると停止します。ブラウザの更新で、消えます。

7-3 ソースコード


<script type="text/javascript"><!--
var n=20;
var a = 0;
var i;
var x = new Array();
var y = new Array();
var vy = new Array();
var ts = new Array();
document.open();
for(i=0;i<n;i++)
{
	document.write('<img src="img/star'+Math.floor(Math.random()*5)+'.gif" id="text'+i+'" style="position: absolute; left: -100px;" />');
}
document.close();
for(i=0;i<n;i++)
{
	x[i] = Math.floor(Math.random()*document.body.clientWidth)-50;
	y[i] = Math.floor(Math.random()*document.body.clientHeight);
	vy[i] = 5+Math.floor(Math.random()*10);
	ts[i] = document.getElementById("text"+i).style;
}
setInterval(
	function()
	{
		if(a==1)
		{
			for(i=0;i<n;i++)
			{
				ts[i].position = 'absolute';
				ts[i].top = y[i]+'px';
				ts[i].left = x[i]+'px';
				y[i] += vy[i];
				if(y[i]>document.body.clientHeight)
				{
					x[i] = Math.floor(Math.random()*document.body.clientWidth)-50;
					y[i] = 0;
					vy[i] = 5+Math.floor(Math.random()*10);
				}
			}
		}
	}
,100);
void(0)
function input()
{
	if(a==0) a = 1;
	else a = 0;
}
document.write('<input type="button" value="GO/STOP" onClick="input()">');
// --></script>

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

青色が付け足した部分です。ボタンがクリックされると a の値が 0 ⇔ 1 と切り替わります。そして、a の値が 1 の時だけ本体部分を動かしています。

ポイント1
fontタグのtype属性でbuttonを指定して、ボタンを作っています。ただ、javascriptの中に書く必要はありません。

ポイント2
fontタグのonClick属性で、javascriptの中に作った関数を実行できます。これは、クリックされたときに1回実行されます。サンプルでは、input()を実行しています。

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

< 6.画像を使って見る □ ホームページ □ 8.タネを隠そう >