ストップウォッチアプリ。5秒±0.3秒で止めたら成功。時間も表示する。何回連続で成功するかカウントする。失敗したら巨大な「人生の敗者」という文字が高速で回転する。

ストップウォッチアプリ

0.000

<!DOCTYPE html>
<html>
<head>
	<title>ストップウォッチアプリ</title>
</head>
<body>
	<h1>ストップウォッチアプリ</h1>
	<p id="timer">0.000</p>
	<p id="score">0</p>
	<button onclick="startStopwatch()">スタート</button>
	<button onclick="stopStopwatch()">ストップ</button>
	<p id="result"></p>
	<script>
		var startTime;
		var elapsedTime = 0;
		var timerId;
		var isRunning = false;
		var score = 0;

		function startStopwatch() {
			if (isRunning === false) {
				startTime = Date.now();
				timerId = setInterval(updateTime, 10);
				isRunning = true;
			}
		}

		function stopStopwatch() {
			if (isRunning === true) {
				var currentTime = Date.now();
				elapsedTime = (currentTime - startTime) / 1000;
				if (elapsedTime >= 4.7 && elapsedTime <= 5.3) {
					score++;
					document.getElementById("score").innerHTML = "成功回数: " + score;
					document.getElementById("result").innerHTML = "";
				} else {
					document.getElementById("result").innerHTML = "人生の敗者";
					document.getElementById("result").style.fontSize = "300px";
					document.getElementById("result").style.animation = "spin 2s infinite linear";
					score = 0;
					document.getElementById("score").innerHTML = "成功回数: " + score;
				}
				clearInterval(timerId);
				elapsedTime = 0;
				isRunning = false;
			}
		}

		function updateTime() {
			var currentTime = Date.now();
			elapsedTime = (currentTime - startTime) / 1000;
			document.getElementById("timer").innerHTML = elapsedTime.toFixed(3);
		}
	</script>
	<style>
		@keyframes spin {
			from {transform: rotate(0deg);}
			to {transform: rotate(360deg);}
		}
	</style>
</body>
</html>