⏱️ ストップウォッチ 🎉
00:00:00
💰 賞金: ¥0
🎈🎉🎊✨🌟🎀
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; text-align: center; font-family: Arial, sans-serif; background-color: #f0f8ff; border: 2px solid #add8e6; border-radius: 10px; position: relative;">
<div style="font-size: 2em; margin-top: 20px;">⏱️ ストップウォッチ 🎉</div>
<div id="time" style="font-size: 1.5em; margin: 20px 0;">00:00:00</div>
<div id="earnings" style="font-size: 1.2em; margin-bottom: 20px;">💰 賞金: ¥0</div>
<div>
<button id="startBtn" style="font-size: 1em; padding: 10px 20px; margin: 5px; cursor: pointer; border: none; background-color: #4caf50; color: white; border-radius: 5px;" onclick="startTimer()">▶️ Start</button>
<button id="stopBtn" style="font-size: 1em; padding: 10px 20px; margin: 5px; cursor: pointer; border: none; background-color: #f44336; color: white; border-radius: 5px;" onclick="stopTimer()">⏸️ Stop</button>
<button id="resetBtn" style="font-size: 1em; padding: 10px 20px; margin: 5px; cursor: pointer; border: none; background-color: #ff9800; color: white; border-radius: 5px;" onclick="resetTimer()">🔄 Reset</button>
</div>
<div style="position: absolute; bottom: 10px; width: 100%; text-align: center;">
<span style="font-size: 1.5em;">🎈🎉🎊✨🌟🎀</span>
</div>
<canvas id="confetti" width="400" height="400" style="position: absolute; top: 0; left: 0; pointer-events: none;"></canvas>
</div>
<script>
let startTime, elapsedTime = 0, timerInterval;
const timeDisplay = document.getElementById('time');
const earningsDisplay = document.getElementById('earnings');
const confettiCanvas = document.getElementById('confetti');
const ctx = confettiCanvas.getContext('2d');
function updateTime() {
elapsedTime = Date.now() - startTime;
let totalSeconds = Math.floor(elapsedTime / 1000);
if (totalSeconds >= 21600) { // 6 hours in seconds
stopTimer();
return;
}
let hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
let minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
let seconds = String(totalSeconds % 60).padStart(2, '0');
timeDisplay.textContent = `${hours}:${minutes}:${seconds}`;
earningsDisplay.textContent = `💰 賞金: ¥${(totalSeconds * 300).toLocaleString()}`;
}
function startTimer() {
if (!timerInterval) {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(updateTime, 1000);
animateButton('startBtn');
launchConfetti();
}
}
function stopTimer() {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
animateButton('stopBtn');
}
}
function resetTimer() {
stopTimer();
elapsedTime = 0;
timeDisplay.textContent = "00:00:00";
earningsDisplay.textContent = "💰 賞金: ¥0";
animateButton('resetBtn');
}
function animateButton(id) {
const button = document.getElementById(id);
button.style.animation = 'pop 0.3s';
button.addEventListener('animationend', () => {
button.style.animation = '';
}, { once: true });
}
function launchConfetti() {
const colors = ['#fde132', '#009bde', '#ff6b00'];
const particles = [];
function createParticles() {
for (let i = 0; i < 100; i++) {
particles.push({
x: Math.random() * confettiCanvas.width,
y: Math.random() * confettiCanvas.height - confettiCanvas.height,
r: Math.random() * 4 + 1,
d: Math.random() * particles.length,
color: colors[Math.floor(Math.random() * colors.length)],
tilt: Math.floor(Math.random() * 10) - 10,
tiltAngleIncremental: (Math.random() * 0.07) + 0.05,
tiltAngle: 0
});
}
}
createParticles();
function draw() {
ctx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);
particles.forEach(p => {
ctx.beginPath();
ctx.lineWidth = p.r;
ctx.strokeStyle = p.color;
ctx.moveTo(p.x + p.tilt + p.r, p.y);
ctx.lineTo(p.x + p.tilt, p.y + p.tilt + p.r);
ctx.stroke();
});
update();
}
let angle = 0;
function update() {
angle += 0.01;
particles.forEach(p => {
p.y += (Math.cos(angle + p.d) + 1 + p.r / 2) / 2;
p.tiltAngle += p.tiltAngleIncremental;
p.tilt = Math.sin(p.tiltAngle) * 15;
if (p.y > confettiCanvas.height) {
p.y = -10;
p.x = Math.random() * confettiCanvas.width;
}
});
}
setInterval(draw, 33);
}
</script>
</body>
</html>
```