差: 0
相手 📈: 0
自分 📈: 0
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チャンネル登録者数リアルタイム追跡</title>
<style>
@keyframes animateDiff {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
@keyframes buttonClickAnimation {
from { background-color: yellow; }
to { background-color: red; }
}
@keyframes flash {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; background-color: black; color: white; padding: 10px;">
<div id="difference" style="color: yellow; font-size: 20px; text-align: center;">差: 0</div>
<div id="opponentStats" style="font-size: 24px; text-align: center;">相手 📈: 0</div>
<div id="userStats" style="font-size: 24px; text-align: center;">自分 📈: 0</div>
<input id="userName" placeholder="自分の名前" style="width: 100%; margin-bottom: 10px;">
<input id="opponentName" placeholder="相手の名前" style="width: 100%; margin-bottom: 10px;">
<input id="initialSubscribers" type="number" placeholder="初期のチャンネル登録者数" style="width: 100%; margin-bottom: 10px;">
<input id="startButton" type="button" value="完了" style="width: 100%; background-color: lime; font-size: 18px;">
</div>
<script>
const differenceElem = document.getElementById("difference");
const opponentStatsElem = document.getElementById("opponentStats");
const userStatsElem = document.getElementById("userStats");
const userNameInput = document.getElementById("userName");
const opponentNameInput = document.getElementById("opponentName");
const initialSubscribersInput = document.getElementById("initialSubscribers");
const startButton = document.getElementById("startButton");
let userSubscribers = 0;
let opponentSubscribers = 0;
startButton.onclick = () => {
startButton.style.animation = "buttonClickAnimation 0.5s";
setTimeout(() => { startButton.style.animation = ""; }, 500);
const userName = userNameInput.value;
const opponentName = opponentNameInput.value;
userSubscribers = parseInt(initialSubscribersInput.value);
opponentSubscribers = parseInt(initialSubscribersInput.value);
updateStats();
setInterval(() => {
userSubscribers += Math.floor(Math.random() * 5) - 2;
opponentSubscribers += Math.floor(Math.random() * 5) - 2;
if (userSubscribers < 0) userSubscribers = 0;
if (opponentSubscribers < 0) opponentSubscribers = 0;
updateStats();
}, 2000);
};
function updateStats() {
const difference = userSubscribers - opponentSubscribers;
differenceElem.innerHTML = `差: ${difference > 0 ? '+' : ''}${difference}`;
opponentStatsElem.innerHTML = `相手 📈: ${opponentSubscribers}`;
userStatsElem.innerHTML = `自分 📈: ${userSubscribers}`;
differenceElem.style.animation = "animateDiff 0.5s";
setTimeout(() => { differenceElem.style.animation = ""; }, 500);
}
</script>
</body>
</html>
```