JavaScript ストップウォッチ
Harshit Jindal
2024年2月15日
ストップウォッチは、アクティブ化から非アクティブ化までの時間を測定するために使用されます。特定の活動にかかる時間を測定するのに役立ちます。時間間隔関連の実装に役立つ JavaScript タイミングメソッド setTimeout() および clearTimeout() を使用してストップウォッチを構築します。ストップウォッチには、ディスプレイと 3つのボタンがあります。ディスプレイには、時間と、ストップウォッチを開始、停止、リセットするための 3つのボタンが表示されます。このチュートリアルでは、JavaScript でストップウォッチを作成する方法を説明します。
JavaScript ストップウォッチ
HTML コード
<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>
上記のコードでは、HTML を使用してストップウォッチの時刻を表示し、start、stop、reset の 3つの必須ボタンを作成します。
JavaScript コード
var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;
function tick() {
sec++;
if (sec >= 60) {
sec = 0;
min++;
if (min >= 60) {
min = 0;
hrs++;
}
}
}
function add() {
tick();
h1.textContent = (hrs > 9 ? hrs : '0' + hrs) + ':' +
(min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
timer();
start.onclick = timer;
stop.onclick = function() {
clearTimeout(t);
} reset.onclick = function() {
h1.textContent = '00:00:00';
seconds = 0;
minutes = 0;
hours = 0;
}
-
最初にセレクターを使用してすべての HTML 要素を選択し、JavaScript を使用してそれらを操作し、
3変数hrs、min、およびsecを初期化して現在の時刻を保存できるようにします。また、変数tを宣言してsetTimeout()を格納し、clearTimeout()を呼び出してクリアします。 -
タイマー機能を
startボタンに追加しました。startボタンをクリックするたびに、timer()関数が呼び出され、1秒の間隔で add 関数が呼び出されます。add()関数はtick()関数を呼び出して秒を1インクリメントし、それに応じて分と時間を調整します。ディスプレイの内容をリセットして新しい時刻を表示してから、timer()関数を再度呼び出すことで自分自身を呼び出します。 -
定期的に add 関数の呼び出しを停止するために、
clearTimeout()をstopボタンにアタッチしました。 -
時刻を
00:00:00にリセットし、sec、min、hrsを0にリセットしてresetボタンにリセットする機能を追加しました。
著者： Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn