🎉しょうた: 2299979人🎉
🌀催眠術: 2307873人🌀
差: 7894人
```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 bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes jiggle {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
.button:active {
animation: bounce 0.3s;
}
.difference {
animation: jiggle 1s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid black; padding: 10px; overflow: hidden; box-sizing: border-box;">
<div style="text-align: center; font-size: 20px; margin-bottom: 10px;">
<span>🎉しょうた: <span id="shota-count">2299979</span>人🎉</span>
</div>
<div style="text-align: center; font-size: 20px; margin-bottom: 10px;">
<span>🌀催眠術: <span id="hypno-count">2307873</span>人🌀</span>
</div>
<div style="text-align: center; font-size: 20px; margin-bottom: 10px;">
差: <span id="difference" class="difference">7894</span>人
</div>
<div style="text-align: center;">
<button class="button" style="font-size: 20px; margin-top: 10px;" onclick="updateCount('shota', 10)">😁しょうた+10</button>
<button class="button" style="font-size: 20px; margin-top: 10px;" onclick="updateCount('shota', -100)">😭しょうた-100</button>
<button class="button" style="font-size: 20px; margin-top: 10px;" onclick="updateCount('hypno', 10)">🌀催眠術+10</button>
<button class="button" style="font-size: 20px; margin-top: 10px;" onclick="updateCount('hypno', -100)">😱催眠術-100</button>
</div>
</div>
<script>
let shotaCount = 2299979;
let hypnoCount = 2307873;
function updateCount(channel, amount) {
if (channel === 'shota') {
shotaCount += amount;
document.getElementById('shota-count').textContent = shotaCount;
} else if (channel === 'hypno') {
hypnoCount += amount;
document.getElementById('hypno-count').textContent = hypnoCount;
}
const difference = hypnoCount - shotaCount;
document.getElementById('difference').textContent = difference;
}
</script>
</body>
</html>
```