setIntervalメッソッド

windowオブジェクトのsetIntervalメッソッドは一定時間(1ミリ秒)ごとに指定された処理を繰り返し実行します。

書式	window.setInterval(処理,時間)
対応
引数	処理	繰り返し実行する処理を指定
引数	時間	処理を開始するまでの時間を数値(ミリ秒)で指定
機能	ミリ秒単位で指定した時間後に処理を実行する

setinterval.html

使用例①	ボタンをクリックしてからの経過時間を表示する。


<html>
<head>
<title>JavaScript setInterval</title>
<script type="text/javascript"> 
var flg = true;
var start;
var winInterval;
function setTimer(){
	
	if(flg){
		start = new Date();                
		winInterval = window.setInterval('Timer()',1000);
		flg = false;       
	}else{ 
		window.clearInterval(winInterval); 
		flg = true;
	}
}

function Timer(){
	var stop = new Date();	
	var t = stop.getTime() - start.getTime();
	var h = Math.floor(t/(60*60*1000));
	t = t - (h*60*60*1000);
	var m = Math.floor(t/(60*1000));
	t = t - (m*60*1000);
	var s = Math.floor(t/1000); 

	document.timer.hour.value = h;	
	document.timer.minutes.value = m;
	document.timer.second.value = s;
}
</script>
</head>
<body>
<form name="timer">
経過時間:
<input name="hour" value="0" size="2">時間
<input name="minutes" value="0" size="2">分
<input name="second" value="0" size="2">秒
<input type="button" value="START／STOP" onClick="setTimer()">
</form>
</body>
</html>

stop_watch.html


<html>
<head>
<title>JavaScript stop watch</title>
<script type="text/javascript"> 
var winInterval;
var wktime = 0;
var start = 0;

function setTimer(action){
	
	if(action == 'start'){
		start = new Date();
		start = start.getTime();
		
		if(wktime != 0){	
			//2回目以降、開始時刻より経過時間をマイナスする
			start = start - wktime;
		}
		winInterval = window.setInterval('Timer()',1);
		//STARTボタンを無効化
		document.getElementById("START").disabled = true;
	}else if(action == 'stop'){
		window.clearInterval(winInterval);
		//STARTボタンの無効化解除
		document.getElementById("START").disabled = false;
	}else if(action == 'clear'){
		window.clearInterval(winInterval);              
		document.timer.hour.value = "00";	
		document.timer.minutes.value = "00";
		document.timer.second.value = "00";
		document.timer.msecond.value = "000";
		//STARTボタンの無効化解除
		document.getElementById("START").disabled = false;
		wktime = 0;
	}
}

function Timer(){
	var end = new Date();

	var t = end.getTime() - start;
	//経過時間を退避
	wktime = t;	
	var h = Math.floor(t/(60*60*1000));
	t = t - (h*60*60*1000);
	var m = Math.floor(t/(60*1000));
	t = t - (m*60*1000);
	var s = Math.floor(t/1000); 
	var ms = t%1000;

	document.timer.hour.value = to2Digit(h);	
	document.timer.minutes.value = to2Digit(m);
	document.timer.second.value = to2Digit(s);
	document.timer.msecond.value = to3Digit(ms);
}

//時分秒を2桁にする
function to2Digit(t) {
	if (t < 10) {
		t = "0" + t;
	}
	return t;
}

//ミリ秒を3桁にする
function to3Digit(t) {
	if (t < 10) {
		t = "00" + t;
	}else if(t < 100){
		t = "0" + t;
	}
	return t;
}
</script>
</head>
<body>
<form name="timer">
経過時間:
<input name="hour" value="0" size="2">時間
<input name="minutes" value="0" size="2">分
<input name="second" value="0" size="2">秒
<input name="msecond" value="000" size="2">ミリ秒
<input type="button" id="START" value="START" onClick="setTimer('start')">
<input type="button" id="STOP" value="STOP" onClick="setTimer('stop')">
<input type="button" id="CLEARE" value="CLEAR" onClick="setTimer('clear')">
</form>
</body>
</html>

使用例②	STARTボタンをクリックしてからENDボタンをクリックした経過時間を表示する（ストップウォッチ機能）。

関連メンバ	機能
setTimeout	ミリ秒単位で指定した時間後に実行する
clearTimeout	setTimeoutメソッドの停止
clearInterval	setIntervalメソッドの停止