cat-demo-003 / index.html
MakiAi's picture
Update index.html
68ba52d verified
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>鐚伄銈广儓銉冦儣銈︺偐銉冦儊</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f8ff;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: inline-block;
}
#timer {
font-size: 48px;
margin: 20px 0;
color: #ff69b4;
}
button {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #ffb6c1;
color: white;
}
button:hover {
background-color: #ff89a1;
}
.cat {
font-size: 60px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="cat">馃惐</div>
<h1>鐚伄銈广儓銉冦儣銈︺偐銉冦儊</h1>
<div id="timer">00:00:00</div>
<div>
<button onclick="startTimer()">闁嬪</button>
<button onclick="stopTimer()">鍋滄</button>
<button onclick="resetTimer()">銉偦銉冦儓</button>
</div>
</div>
<script>
let timer;
let time = 0;
let running = false;
function startTimer() {
if (!running) {
running = true;
timer = setInterval(() => {
time++;
updateDisplay();
}, 1000);
}
}
function stopTimer() {
if (running) {
running = false;
clearInterval(timer);
}
}
function resetTimer() {
running = false;
clearInterval(timer);
time = 0;
updateDisplay();
}
function updateDisplay() {
let hours = Math.floor(time / 3600);
let minutes = Math.floor((time % 3600) / 60);
let seconds = time % 60;
hours = String(hours).padStart(2, '0');
minutes = String(minutes).padStart(2, '0');
seconds = String(seconds).padStart(2, '0');
document.getElementById('timer').textContent = `${hours}:${minutes}:${seconds}`;
}
</script>
</body>
</html>