戻る

カウントダウン

タイマーを使用したカウントダウン

カウントダウン
スタート	リセット

[HTML/CSS]
<table> <tr> <td>カウントダウン</td> <td><div id="countdown"></div></td> </tr> <tr> <td><button id="start">スタート</button></td> <td><button id="reset">リセット</button></td> </tr> </table>
copy

const btnStart = document.getElementById("start");
btnStart.addEventListener("click", () => 
{
	start();
});
const btnReset = document.getElementById("reset");
btnReset.addEventListener("click", () => 
{
	reset();
});
const countdown = document.getElementById("countdown");

let stop = 0;//[0]処理可能 [1]停止
let intervalId = null;
const timeInit = 600;
let state = 0;//[0]未実行 [1]実行中
function start()
{
	if(stop == 1 || state == 1)return;
	state = 1;
	timer();
}
function reset()
{
	stop = 1;
	state = 0;
	countdown.innerText = "";
	countdownEn.innerText = "";
	clearInterval(intervalId);
	stop = 0;
}
function timer()
{
	let time = timeInit;//残りの時間
	intervalId = setInterval(() => 
	{
		// 止める条件
		if (stop == 1 || time <= 0) 
		{
			clearInterval(intervalId);
			if (stop == 1)
			{
				displayTime(timeInit);
			}
			else
			{
				//タイムアップと表示
				countdown.innerText = "Time is up";
			}
			stop = 0;
			state = 0;
			return;
		}
		time--;
		if(time < 0) time=0;
		displayTime(time);
	}, 100);
}
function displayTime(time)
{
	let quotient = 0;//商
	let rest = 0;//剰余
	quotient = Math.floor(time / 10);
	rest = time % 10;
	countdown.innerText = quotient + "." + rest;
}

1000で1秒なので、0.1秒ごとにタイマーを実行します。

リセットボタンを選択すると
stop変数に1が設定されます。
これがタイマーの停止条件になります。
time変数を
time--;
でデクリメントしていきます。
time <= 0になったら、タイマーの停止条件になります。

setIntervalの戻り値が発行ID(ユニークな値)です。
このIDをclearInterval関数の引数に設定して実行することで
タイマーを停止することができます。



戻る

back

Countdown

Countdown using a timer

Countdown
Start	Reset

[HTML/CSS]
<table> <tr> <td>Countdown</td> <td><div id="countdown"></div></td> </tr> <tr> <td><button id="start">Start</button></td> <td><button id="reset">Reset</button></td> </tr> </table>
copy

const btnStart = document.getElementById("start");
btnStart.addEventListener("click", () => 
{
	start();
});
const btnReset = document.getElementById("reset");
btnReset.addEventListener("click", () => 
{
	reset();
});
const countdown = document.getElementById("countdown");

let stop = 0;//[0] Processing possible [1] Stop
let intervalId = null;
const timeInit = 600;
let state = 0;//0] Not running [1] Running
function start()
{
	if(stop == 1 || state == 1)return;
	state = 1;
	timer();
}
function reset()
{
	stop = 1;
	state = 0;
	countdown.innerText = "";
	countdownEn.innerText = "";
	clearInterval(intervalId);
	stop = 0;
}
function timer()
{
	let time = timeInit;//Remaining time
	intervalId = setInterval(() => 
	{
		// Stop conditions
		if (stop == 1 || time <= 0) 
		{
			clearInterval(intervalId);
			if (stop == 1)
			{
				displayTime(timeInit);
			}
			else
			{
				//display "Time up"
				countdown.innerText = "Time is up";
				state = 0;
			}
			stop = 0;
			return;
		}
		time--;
		if(time < 0) time=0;
		displayTime(time);
	}, 100);
}
function displayTime(time)
{
	let quotient = 0;//quotient
	let rest = 0;//surplus
	quotient = Math.floor(time / 10);
	rest = time % 10;
	countdown.innerText = quotient + "." + rest;
}

Since 1000 is 1 second, the timer will run every 0.1 seconds.

When you select the reset button,
the stop variable is set to 1.
This is the timer's stop condition.
Decrement the time variable
time--;
.
When time <= 0, the timer's stop condition is met.

The return value of setInterval is the issued ID (a unique value).
You can stop the timer by executing the clearInterval function with this ID as an argument.



back