ストップウォッチアプリ

0.000
人生の敗者
<!DOCTYPE html>
<html>
<head>
	<title>ストップウォッチアプリ</title>
	<style>
		body {
			text-align: center;
		}
		h1 {
			font-size: 28px;
			margin-top: 50px;
		}
		.timer {
			font-size: 120px;
			margin-top: 30px;
		}
		.button {
			margin-top: 50px;
			font-size: 24px;
			padding: 10px 20px;
		}
		.result {
			font-size: 24px;
			margin-top: 50px;
		}
		.loser {
			display: none;
			font-size: 200px;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<h1>ストップウォッチアプリ</h1>
	<div class="timer">0.000</div>
	<button class="button" onclick="start()">スタート</button>
	<div class="result"></div>
	<div class="loser">人生の敗者</div>

	<script>
		var startTime, endTime, elapsedTime;
		var successCount = 0;
		var result = document.querySelector('.result');
		var loser = document.querySelector('.loser');

		function start() {
			startTime = new Date().getTime();

			var button = document.querySelector('.button');
			button.textContent = 'ストップ';
			button.className = 'button stop';

			button.removeEventListener('click', start);
			button.addEventListener('click', stop);
		}

		function stop() {
			endTime = new Date().getTime();
			elapsedTime = (endTime - startTime) / 1000;

			var button = document.querySelector('.stop');
			button.textContent = 'スタート';
			button.className = 'button';

			button.removeEventListener('click', stop);
			button.addEventListener('click', start);

			if (elapsedTime < 5.3 && elapsedTime > 4.7) {
				successCount++;
				result.textContent = '成功！' + successCount + '回連続成功！';
			} else {
				successCount = 0;
				result.textContent = '失敗！';
				loser.style.display = 'block';
				setTimeout(function() {
					loser.style.display = 'none';
				}, 2000);
			}

			document.querySelector('.timer').textContent = elapsedTime.toFixed(3);
		}
	</script>
</body>
</html>