<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ストップウォッチアプリ</title>
</head>
<body>
<h1>ストップウォッチアプリ</h1>
<h2 id="timer">0.0秒</h2>
<h3>成功回数: <span id="success-count">0</span></h3>
<button id="start-btn" onclick="startStopwatch()">Start</button>
<button id="stop-btn" onclick="stopStopwatch()">Stop</button>
<script>
var startTime, endTime, timeInterval, successCount = 0;
function startTimer() {
var elapsedTime = Date.now() - startTime;
var seconds = parseFloat((elapsedTime / 1000).toFixed(1));
document.getElementById("timer").innerHTML = seconds + "秒";
}
function startStopwatch() {
startTime = Date.now();
timeInterval = setInterval(startTimer, 100);
document.getElementById("start-btn").disabled = true;
document.getElementById("stop-btn").disabled = false;
}
function stopStopwatch() {
clearInterval(timeInterval);
endTime = Date.now();
var seconds = parseFloat(((endTime - startTime) / 1000).toFixed(1));
document.getElementById("timer").innerHTML = seconds + "秒";
if (seconds >= 4.7 && seconds <= 5.3) {
successCount++;
document.getElementById("success-count").innerHTML = successCount;
} else {
var loser = document.createElement("div");
loser.innerHTML = "<h4>人生の敗者</h4>";
loser.style.fontSize = "100px";
loser.style.color = "red";
loser.style.textAlign = "center";
loser.style.transform = "rotate(0deg)";
loser.style.transition = "transform 0.5s linear";
document.body.appendChild(loser);
setTimeout(function() {
loser.style.transform = "rotate(3600deg)";
}, 10);
}
document.getElementById("start-btn").disabled = false;
document.getElementById("stop-btn").disabled = true;
}
</script>
</body>
</html>
