ストップウォッチアプリ
0.000
成功: 0
以下は、要望に合わせたストップウォッチアプリの実装例です。JavaScriptのevalやセキュリティ脆弱性がないように注意しました。
index.html:
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ストップウォッチアプリ</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
h1 {
font-size: 24px;
}
#time {
font-size: 48px;
margin: 20px;
}
#result {
font-size: 18px;
margin-bottom: 20px;
}
#message {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1>ストップウォッチアプリ</h1>
<div id="time">0.000</div>
<div id="result">成功: 0</div>
<div id="message"></div>
<button onclick="startStopwatch()">始める</button>
<button onclick="stopStopwatch()">止める</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
script.js:
```javascript
let startTime;
let successCount = 0;
let running = false;
let resultElement = document.getElementById('result');
let messageElement = document.getElementById('message');
function startStopwatch() {
if (running) {
return;
}
startTime = Date.now();
running = true;
resultElement.textContent = `成功: ${successCount}`;
messageElement.textContent = '';
// 5秒後に失敗と判定
setTimeout(() => {
if (running) {
stopStopwatch();
showFailureMessage();
}
}, 5300 + Math.random() * 300);
}
function stopStopwatch() {
if (!running) {
return;
}
let elapsedTime = Date.now() - startTime;
running = false;
// 成功判定
if (elapsedTime >= 4700 && elapsedTime <= 5300) {
successCount++;
}
resultElement.textContent = `成功: ${successCount}`;
messageElement.textContent = '';
}
function showFailureMessage() {
let message = '人生の敗者';
let rotationSpeed = 50; // 回転速度(度/秒)
let i = 0;
let intervalId = setInterval(() => {
messageElement.style.transform = `rotate(${i}deg)`;
i += rotationSpeed / 60;
}, 1000 / 60);
setTimeout(() => {
clearInterval(intervalId);
messageElement.style.transform = '';
}, 3000);
}
```
このアプリでは、"始める"ボタンをクリックすると計測が開始されます。5秒±0.3秒の間で止めると成功と判定され、"成功"のカウントが増えます。失敗した場合は"人生の敗者"という文字が高速で回転し、3秒後に元に戻ります。"止める"ボタンをクリックすると、現在の計測が終了し、成功判定が行われます。
面白いジョークやエンターテイメント要素を取り入れることで、ユーザーに楽しい体験を提供できるかもしれません。