WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

ストップウォッチ

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 );
})