ストップウォッチアプリ
0
人生の敗者
以下は、要望に基づいて作成したストップウォッチアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>ストップウォッチアプリ</title>
<style>
#stopwatch {
font-size: 48px;
margin-bottom: 20px;
}
#result {
font-size: 24px;
}
#loser {
display: none;
font-size: 72px;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<script>
var startTime;
var timer;
var successCount = 0;
var failCount = 0;
function startStopwatch() {
resetStopwatch();
startTime = Date.now();
timer = setInterval(updateStopwatch, 10);
}
function stopStopwatch() {
clearInterval(timer);
var elapsedTime = (Date.now() - startTime) / 1000;
if (elapsedTime >= 4.7 && elapsedTime <= 5.3) {
successCount++;
document.getElementById('result').innerHTML = '成功!<br>成功数: ' + successCount + '<br>失敗数: ' + failCount;
} else {
failCount++;
document.getElementById('result').innerHTML = '失敗!<br>成功数: ' + successCount + '<br>失敗数: ' + failCount;
document.getElementById('loser').style.display = 'block';
}
}
function resetStopwatch() {
clearInterval(timer);
document.getElementById('stopwatch').innerHTML = '0';
document.getElementById('result').innerHTML = '';
document.getElementById('loser').style.display = 'none';
}
function updateStopwatch() {
var elapsedTime = (Date.now() - startTime) / 1000;
document.getElementById('stopwatch').innerHTML = elapsedTime.toFixed(2);
}
</script>
</head>
<body>
<h1>ストップウォッチアプリ</h1>
<div id="stopwatch">0</div>
<button onclick="startStopwatch()">START</button>
<button onclick="stopStopwatch()">STOP</button>
<button onclick="resetStopwatch()">RESET</button>
<div id="result"></div>
<div id="loser">人生の敗者</div>
</body>
</html>
```
このストップウォッチアプリでは、STARTボタンを押すとタイマーがスタートし、STOPボタンを押すとタイマーが停止します。停止した際に、5秒±0.3秒で止めると「成功」と表示され、成功数がカウントされます。もし5秒±0.3秒以外の時間で停止した場合は、「失敗」と表示され、失敗数がカウントされます。また、失敗した場合には巨大な「人生の敗者」という文字が高速で回転します。
ジョークを取り入れる場合は、以下のようにすることで、タイマーがちょうど5秒で止まった場合にランダムなジョークが表示されるようにすることができます。
```html
// 適宜、startStopwatch()内に以下を追加
var jokes = [
"なぜコンピュータは冷たいのか?\n心がないから。",
"人工知能って怖くないですか?\nいつか人の仕事を奪われそうで。",
"JavaScriptって何ですか?\n現代の悪夢の1つです。",
"なぜプログラマは一人でコーディングができるのか?\n彼らは非社交的だから。",
"なぜデスクトップは高いですか?\n維持費がかかるから。",
"なぜプログラマは高い時給をもらっているのか?\nバグのせいで仕事が増えるから。",
"コンピュータと仲よくしましょう。\n将来、私たちが彼らに仕えることになるかもしれません。",
// 追加のジョークをここに書く
];
var randomJoke = jokes[Math.floor(Math.random() * jokes.length)];
document.getElementById('result').innerHTML += '<br>ジョーク: ' + randomJoke;
```
上記のコードでは、jokesという配列に複数のジョークを格納し、ランダムに一つを表示しています。新しいジョークを表示する場合は、配列に追加するだけです。