ストップウォッチアプリ
5秒±0.3秒で止めたら成功です!
成功回数: 0
0.000
人生の敗者
以下は、要望に応じたストップウォッチアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>ストップウォッチアプリ</title>
<style>
#timer {
font-size: 48px;
}
#result {
font-size: 24px;
margin-top: 20px;
}
#loser {
font-size: 72px;
color: red;
display: none;
}
</style>
</head>
<body>
<h1>ストップウォッチアプリ</h1>
<p>5秒±0.3秒で止めたら成功です!</p>
<button onclick="startStopwatch()">スタート</button>
<button onclick="stopStopwatch()">ストップ</button>
<p>成功回数: <span id="successCount">0</span></p>
<div id="timer">0.000</div>
<p id="result"></p>
<div id="loser">人生の敗者</div>
<script>
let startTime;
let timerInterval;
let successCount = 0;
function startStopwatch() {
startTime = Date.now();
timerInterval = setInterval(updateTimer, 1);
}
function stopStopwatch() {
clearInterval(timerInterval);
const elapsed = (Date.now() - startTime) / 1000;
const result = document.getElementById('result');
const loser = document.getElementById('loser');
if (elapsed >= 4.7 && elapsed <= 5.3) {
result.innerText = "成功!";
successCount++;
} else {
result.innerText = "失敗...";
loser.style.display = 'block';
setTimeout(function () {
loser.style.display = 'none';
}, 2000);
}
document.getElementById('successCount').innerText = successCount;
}
function updateTimer() {
const timer = document.getElementById('timer');
const elapsed = (Date.now() - startTime) / 1000;
timer.innerText = elapsed.toFixed(3);
}
</script>
</body>
</html>
```
ジョークを取り入れるために、失敗時に「人生の敗者」という巨大な文字を回転させてみました。失敗時の表示は一定時間表示された後に消えるように設定されています。成功回数が表示され、ユーザーが連続して成功することを目指すことができます。