iPhone標準アプリより正確なストップウォッチ
小数点3桁まで計測する必要があったのですが、手ごろなアプリが無かったのでHTMLで作りました。ダラダラ書くの嫌なので、コードをどうぞ。
自己責任で試してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#time {
font-size: 36px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 14px;
margin: 5px;
}
#laps {
margin-top: 20px;
text-align: left;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Stopwatch</h1>
<div id="time">00:00:00.000</div>
<div>
<button id="startButton">Start</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
<button id="lapButton" disabled>Lap</button>
</div>
<div id="laps"></div>
<script>
let startTime, updatedTime, difference, tInterval;
let running = false;
let paused = false;
let lapCounter = 0;
let elapsedTime = 0; // 経過時間を保持
let laps = []; // ラップを保持する配列
const timeDisplay = document.getElementById('time');
const lapButton = document.getElementById('lapButton');
const lapsDisplay = document.getElementById('laps');
document.getElementById('startButton').addEventListener('click', startTimer);
document.getElementById('stopButton').addEventListener('click', stopTimer);
document.getElementById('pauseButton').addEventListener('click', pauseTimer);
function startTimer() {
if (!running) {
running = true;
paused = false;
startTime = new Date().getTime() - elapsedTime; // 一時停止していた場合の経過時間を考慮
tInterval = setInterval(getShowTime, 1);
lapButton.disabled = false;
document.getElementById('stopButton').disabled = false;
document.getElementById('pauseButton').disabled = false;
} else if (paused) {
paused = false;
startTime = new Date().getTime() - elapsedTime; // 一時停止から再開
tInterval = setInterval(getShowTime, 1);
}
}
function stopTimer() {
if (running) {
running = false;
clearInterval(tInterval);
elapsedTime = 0; // 経過時間をリセット
lapCounter = 0; // ラップカウンタをリセット
timeDisplay.innerHTML = "00:00:00.000"; // 表示をリセット
lapButton.disabled = true;
document.getElementById('stopButton').disabled = true;
document.getElementById('pauseButton').disabled = true;
}
}
function pauseTimer() {
if (running && !paused) {
paused = true;
clearInterval(tInterval);
elapsedTime = new Date().getTime() - startTime; // 経過時間を更新
lapButton.disabled = false; // ラップボタンを有効化
}
}
function getShowTime() {
updatedTime = new Date().getTime();
difference = updatedTime - startTime;
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
const milliseconds = Math.floor((difference % 1000));
timeDisplay.innerHTML = (hours < 10 ? "0" : "") + hours + ":" +
(minutes < 10 ? "0" : "") + minutes + ":" +
(seconds < 10 ? "0" : "") + seconds + "." +
(milliseconds < 100 ? "0" : "") + (milliseconds < 10 ? "0" : "") + milliseconds;
}
lapButton.addEventListener('click', recordLap);
function recordLap() {
lapCounter++;
const lapTime = timeDisplay.innerHTML;
laps.push(`Lap ${lapCounter}: ${lapTime}`);
lapsDisplay.innerHTML = laps.join('<br>'); // すべてのラップを表示
}
</script>
</body>
</html>