ストップウォッチアプリ

Time: 0s
Count: 0
5秒±0.3秒でストップ！
失敗すると「人生の敗者」と表示されます。
<!DOCTYPE html>
<html>
<head>
	<title>ストップウォッチアプリ</title>
	<script>
		var count = 0;
		var timer;

		function startTimer(){
			var startTime = new Date().getTime();
			timer = setInterval(function(){
				var currentTime = new Date().getTime();
				var difference = currentTime - startTime;
				var seconds = (difference / 1000).toFixed(2);
				document.getElementById("timer").innerHTML = "Time: " + seconds + "s";
			}, 10);
		}

		function stopTimer(){
			clearInterval(timer);
			var time = parseFloat(document.getElementById("timer").innerHTML.split(" ")[1]);
			if(Math.abs(time - 5) <= 0.3){
				count++;
				document.getElementById("result").innerHTML = "成功！";
				document.getElementById("count").innerHTML = "Count: " + count;
			} else {
				document.body.style.animation = "rotate 2s infinite";
				setTimeout(function(){
					document.body.style.animation = "";
					document.getElementById("result").innerHTML = "失敗！";
				}, 2000);
			}
		}
	</script>
	<style>
		body{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 30px;
			font-weight: bold;
			height: 100vh;
			margin: 0;
			background-color: #fff;
			color: #000;
			text-align: center;
			animation-duration: 0.3s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}

		@keyframes rotate{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}

		button{
			padding: 10px 20px;
			cursor: pointer;
			background-color: #000;
			color: #fff;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			font-weight: bold;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>ストップウォッチアプリ</h1>
	<div id="timer">Time: 0s</div>
	<div id="result"></div>
	<div id="count">Count: 0</div>
	<button onclick="startTimer()">START</button>
	<button onclick="stopTimer()">STOP</button>
	<p>5秒±0.3秒でストップ！<br>失敗すると「人生の敗者」と表示されます。</p>
</body>
</html>