点滅

[説明]

setTimeout();とclearTimeout();

[ソースコード]

<input type="button" id="start_btn" value="スタート" />  <input type="button" id="stop_btn" value="ストップ" />
</form>

<p id="kore">「スタート」を押すと色が変わって点滅するよ。「ストップ」を押すと元に戻るよ。</p>

<script type="text/JavaScript">
var start = document.getElementById('start_btn'); // id="start_btn"にアクセス
var stop = document.getElementById('stop_btn'); // id="stop_btn"にアクセス
var tenmetsu = document.getElementById('kore'); // id="kore"にアクセス

/****************************************
		イベント
*****************************************/
start.onclick = function(){ // startボタン
	blinc();
	toggle();
}

stop.onclick = function(){ // stopボタン
	stopTimer();
	toggle();
}

/****************************************
	イベントで呼び出される関数
****************************************/
function blinc(){
	if(tenmetsu.style.visibility == "hidden"){
			tenmetsu.style.visibility = "visible";
			tenmetsu.style.color = "blue";
			tenmetsu.style.fontWeight = "bold";
	}else{
			tenmetsu.style.visibility = "hidden";
	}
	timer = setTimeout("blinc()" , 800); // blinc()の中でかつifの外
	setTimeout();は通常、一回実行したら終了してしまう。そこで繰り返し処理の関数の中にいれることで繰り返し実行できる。
	↑変数にsetTimeout();を代入してやり、clearTimeout();の引数に渡す形でタイマーを止めることができる。
} // End blinc()

function stopTimer(){
	clearTimeout(timer);
	tenmetsu.style.color = "#000";
	tenmetsu.style.fontWeight = "inherit";
}

function toggle(){ // 一方のボタンを押したらもう一方のボタンを押せなくする
	if(start.disabled){
		start.disabled = false;
		stop.disabled = true;
	}else{
		start.disabled = true;
		stop.disabled = false;
	}
} // End toggle()

</script>

インデックスにもどる