CuteCatStopwatch / index.html
MakiAi's picture
Update index.html
38cc018 verified
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>銇嬨倧銇勩亜鐚伄銈广儓銉冦儣銈︺偐銉冦儊</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
padding: 20px;
}
#timer {
font-size: 48px;
margin: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
background-color: #ffb6c1;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #ff9999;
}
#catDisplay {
font-size: 36px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>銇嬨倧銇勩亜鐚伄銈广儓銉冦儣銈︺偐銉冦儊</h1>
<div id="timer">00:00:00</div>
<button onclick="startTimer()">銈广偪銉笺儓</button>
<button onclick="stopTimer()">銈广儓銉冦儣</button>
<button onclick="resetTimer()">銉偦銉冦儓</button>
<div id="catDisplay">馃惥</div>
<script>
let timer;
let time = 0;
const timerDisplay = document.getElementById('timer');
const catDisplay = document.getElementById('catDisplay');
const catEmojis = ['馃惐', '馃樅', '馃樃', '馃惥', '馃悎'];
function updateTimer() {
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
timerDisplay.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
time++;
}
function startTimer() {
if (!timer) {
timer = setInterval(updateTimer, 1000);
catDisplay.textContent = catEmojis[Math.floor(Math.random() * catEmojis.length)];
}
}
function stopTimer() {
clearInterval(timer);
timer = null;
catDisplay.textContent = catEmojis[Math.floor(Math.random() * catEmojis.length)];
}
function resetTimer() {
clearInterval(timer);
timer = null;
time = 0;
timerDisplay.textContent = '00:00:00';
catDisplay.textContent = '馃惥';
}
</script>
</body>
</html>