See the Pen ストップウォッチ by Lesson (@Support_Lounge) on CodePen.
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="clear">クリア</button><br>
<span id="h">00</span>:<span id="m">00</span>:<span id="s">00</span>
const $start = document.getElementById('start')
const $stop = document.getElementById('stop')
const $clear = document.getElementById('clear')
const $h = document.getElementById('h')
const $s = document.getElementById('s')
const $m = document.getElementById('m')
let count = 0//コンマ
let m = 0//秒
let h = 0//分
// タイマー
function time(){
count++
if (count > 99) {
m++
if (m > 59) {
h++
$h.innerHTML = ('00' + h ).slice( -2 );
m = 0
}else{
$m.innerHTML = ('00' + m ).slice( -2 );
count = 0
}
$s.innerHTML = ('00' + count ).slice( -2 );
}else{
$s.innerHTML = ('00' + count ).slice( -2 );
}
}
// スタート
$start.addEventListener('click' , ()=>{
timer = setInterval(time,10)
})
// ストップ
$stop.addEventListener('click' , ()=>{
clearInterval(timer);
})
// クリア
$clear.addEventListener('click' ,()=>{
count = 0
m = 0
h = 0
$h.innerHTML = ('00' + count ).slice( -2 );
$m.innerHTML = ('00' + count ).slice( -2 );
$s.innerHTML = ('00' + count ).slice( -2 );
})