📅 2011年1月
🌸 はると: 0
🍃 ちると: 0
⚡ けいん: 0
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字リアルタイム！🎉</title>
<style>
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
20% { transform: translate(-1px, -2px) rotate(-1deg); }
40% { transform: translate(-3px, 0px) rotate(1deg); }
60% { transform: translate(3px, 2px) rotate(0deg); }
80% { transform: translate(1px, -1px) rotate(1deg); }
100% { transform: translate(1px, 2px) rotate(-1deg); }
}
.animate-bounce {
animation: bounce 0.5s;
}
.animate-shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; position: relative; font-family: Arial, sans-serif; overflow: hidden;">
<div id="date" style="text-align: center; font-size: 20px; margin-top: 10px;">📅 2011年1月</div>
<div style="position: absolute; top: 60px; left: 50%; transform: translateX(-50%);">
<div id="haruto" style="font-size: 24px; margin: 10px;">🌸 はると: <span id="haruto-value">0</span></div>
<div id="chiru" style="font-size: 24px; margin: 10px;">🍃 ちると: <span id="chiru-value">0</span></div>
<div id="kein" style="font-size: 24px; margin: 10px;">⚡ けいん: <span id="kein-value">0</span></div>
</div>
<canvas id="canvas" width="400" height="400" style="position: absolute; top: 0; left: 0;"></canvas>
<button onclick="triggerAnimation()" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 10px;">🎈 クリックして！</button>
</div>
<script>
const dateElement = document.getElementById('date');
const harutoElement = document.getElementById('haruto-value');
const chiruElement = document.getElementById('chiru-value');
const keinElement = document.getElementById('kein-value');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let currentDate = new Date(2011, 0); // 2011年1月
let haruto = 0;
let chiru = 0;
let kein = 0;
let harutoInterval = null;
let chiruInterval = null;
let keinInterval = null;
const updateDate = () => {
dateElement.textContent = `📅 ${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`;
currentDate.setMonth(currentDate.getMonth() + 1);
// Haruto
if ((currentDate >= new Date(2011, 0)) && (currentDate < new Date(2012, 7))) {
haruto += Math.floor(Math.random() * 1000);
harutoElement.textContent = haruto;
animateElement('haruto');
}
if (currentDate >= new Date(2012, 7) && currentDate < new Date(2014, 0)) {
// Haruto stops
}
if (currentDate >= new Date(2014, 0) && currentDate < new Date(2018, 6)) {
haruto += Math.floor(Math.random() * 1000);
harutoElement.textContent = haruto;
animateElement('haruto');
}
// Chiru
if ((currentDate >= new Date(2011, 8)) && (currentDate < new Date(2013, 7))) {
chiru += Math.floor(Math.random() * 1000);
chiruElement.textContent = chiru;
animateElement('chiru');
}
if (currentDate >= new Date(2013, 7) && currentDate < new Date(2014, 0)) {
// Chiru stops
}
if (currentDate >= new Date(2014, 0) && currentDate < new Date(2018, 6)) {
chiru += Math.floor(Math.random() * 1000);
chiruElement.textContent = chiru;
animateElement('chiru');
}
// Kein
if (currentDate >= new Date(2023, 3) && currentDate < new Date(2024, 10)) {
if (currentDate.getFullYear() === 2023 && currentDate.getMonth() === 4) {
kein += 880776;
} else if (currentDate.getFullYear() === 2023 && currentDate.getMonth() === 5) {
kein -= 105313;
} else if (currentDate.getFullYear() === 2023 && currentDate.getMonth() === 10) {
kein += 224452;
} else {
kein += Math.floor(Math.random() * 1000);
}
keinElement.textContent = kein;
animateElement('kein');
}
if (currentDate >= new Date(2024, 10)) {
clearInterval(timer);
}
};
const animateElement = (id) => {
document.getElementById(id).parentElement.classList.add('animate-bounce');
setTimeout(() => {
document.getElementById(id).parentElement.classList.remove('animate-bounce');
}, 500);
};
const timer = setInterval(updateDate, 800);
function triggerAnimation() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = Math.random() * 20 + 10;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
ctx.fill();
animateElement('canvas');
}
</script>
</body>
</html>
```