時間を計る（カウント表示）

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

例文

<form name="form_count"><input name="counter" type="text" size="10"></form>

<script type="text/javascript">
<!--
count = 0; //カウントの初期値
timerID = setInterval('countup()',1000); //1秒毎にcountup()を呼び出し

function countup() {
	count++;
	document.form_count.counter.value = count;
}
-->
</script>

解説

変数countを0に設定し、1秒毎に１を加算することで時間を数えて表示します。
関数seIntervalは指定の時間毎（1/1000秒単位）に指定したユーザー関数を呼び出します。

応用

時間を減らすことで、カウントダウンのタイマーになります。
カウントの初期値はフォームから取っていますので、開始前に数値を変更することができます。

開始ボタンを押すとカウントダウンが始まりますが、その際に開始ボタンを使用不可の状態に変更しています。これは、開始ボタンを何度も押してしまうと、二重三重にタイマーが起動してしまうので、これを防がないと停止できなくなるからです。
停止ボタンを押すと、タイマーを停止し、開始ボタンの使用不可の状態を解除しています。

ユーザー関数countstart内では、フォームに入力された数値（文字列扱い）を関数evalを使って数値化してから変数countに入れています。関数evalを省いてしまうと、文字列として扱われてしまうため、その後の計算が行われません。

ユーザー関数countdown内では、カウントを表示した後に変数countから1を引いています。その次のif文で、カウントが0未満になるとタイマーを止めています。こうすることで、初期値を表示し、０まで表示して終わることができます。

<form name="form_countdown">
<input name="counter" type="text" value="60" size="10">
<input name="start" type="button" value="開始" onClick="countstart()">
<input name="stop" type="button" value="停止" onClick="countstop()">
</form>

<script type="text/javascript">
<!--
function countstart() {
	count = eval(document.form_countdown.counter.value);
	timerID = setInterval('countdown()',1000);
	document.form_countdown.start.disabled = true; //開始ボタンを使用禁止
}

function countstop() {
	clearInterval(timerID);
	document.form_countdown.start.disabled = false; //開始ボタンを解除
	document.form_countdown.reset(); //初期値に戻す
}

function countdown() {
	document.form_countdown.counter.value= count; //カウント表示
	count--; //カウントダウン
	if (count < 0) countstop(); //カウント終了
}
-->
</script>

戻る