START▶
STOP■
```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>
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
</style>
</head>
<body>
<div style="width: 400px; margin: 0 auto; text-align: center; position:relative;">
<div style="position: relative; width: 100%; height: 0; padding-bottom: 100%;">
<div id="clockface" style="position: absolute; width: 100%; height: 100%; border: 10px solid #333; border-radius: 50%;"></div>
<div id="secondhand" style="position: absolute; width: 2px; height: 40%; background: red; top: 10%; left: 50%; transform-origin: bottom; transform: rotate(0deg);"></div>
</div>
<div style="margin-top: 20px;">
<input id="timeInput" type="number" placeholder="秒数を入力" style="padding: 10px; font-size: 16px;">
<div id="startButton" style="display: inline-block; background: blue; color: white; padding: 10px 20px; font-size: 16px; margin: 10px; border-radius: 5px; cursor: pointer; animation: bounce 2s infinite;">START▶</div>
<div id="stopButton" style="display: inline-block; background: red; color: white; padding: 10px 20px; font-size: 16px; margin: 10px; border-radius: 5px; cursor: pointer; animation: bounce 2s infinite;">STOP■</div>
</div>
</div>
<script>
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const secondhand = document.getElementById('secondhand');
let animationDuration = 60; // default duration in seconds
let animationId;
startButton.addEventListener('click', () => {
const inputValue = document.getElementById('timeInput').value;
animationDuration = inputValue ? parseInt(inputValue) : 60;
secondhand.style.animation = `rotate ${animationDuration}s linear 1`;
secondhand.style.transform = 'rotate(0deg)';
animationId = setTimeout(() => {
secondhand.style.animation = '';
secondhand.style.transform = 'rotate(0deg)';
}, animationDuration * 1000 + 100); // adding a small buffer to ensure it resets properly
});
stopButton.addEventListener('click', () => {
secondhand.style.animation = '';
secondhand.style.transform = 'rotate(0deg)';
clearTimeout(animationId);
});
</script>
</body>
</html>
```