#HTMLを書く
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自作ストップウォッチ</title>
</head>
<body>
<div id="timerLabel">00:00:00</div>
<button id="startBtn">START</button>
<button id="stopBtn">STOP</button>
<button id="resetBtn">RESET</button>
<script src="main.js"></script>
</body>
</html>
#javascriptを書く
main.js
'use strict';
{
var time = 0;
var timerLabel = document.getElementById('timerLabel');
var startBtn = document.getElementById('startBtn');
var stopBtn = document.getElementById('stopBtn');
var resetBtn = document.getElementById('resetBtn');
var id; // setTimeoutから返される値を入れる変数
// STARTボタン
function start() {
// スタートボタンを押せないようにする（これをしないと何回もスタートボタン押せてしまう）
startBtn.disabled = true;
// timeをsetTimeoutで設定したミリ秒ごとに1プラスする
time++;
//分・秒・ミリ秒を計算
var min = Math.floor(time/100/60)
var sec = Math.floor(time/100);
var mSec = time % 100;
// 分・秒・ミリ秒が１桁の場合は、先頭に０をつける
if (min < 10) min = '0' + min;
if (sec >= 60) sec = sec % 60; // 秒が60秒以上になった場合の処理（60になったら0になる）
if (sec < 10) sec = '0' + sec;
if (mSec < 10) mSec = '0' + mSec;
// timerLabelを更新
timerLabel.innerHTML = min + ':' + sec + ':' + mSec;
// setTimeoutでstart関数をループさせるイメージ？
id = setTimeout(start, 10);
}
// STOPボタン
function stop() {
// 停止する
clearTimeout(id);
// スタートボタンを押せるようにする
startBtn.disabled = false;
}
// RESETボタン
function reset() {
// 停止する
clearTimeout(id);
// タイムを0に戻す
time = 0;
// タイマーラベルをリセット
timerLabel.innerHTML = '00:00:00';
// スタートボタンを押せるようにする
startBtn.disabled= false;
}
// クリックした時の処理
startBtn.addEventListener('click', start, false); // STARTボタン
stopBtn.addEventListener('click', stop, false); // STOPボタン
resetBtn.addEventListener('click', reset, false); // RESETボタン
}
#参考にした記事
javascriptでストップウォッチを作ってみる。忘備録
【動画・サンプルコード付き】JavaScriptでつくる簡単ストップウォッチ