使用 HTML、CSS 和 JS 的简单倒数计时器
以下是一个使用HTML、CSS和JavaScript创建的简单倒数计时器的示例代码：
<!DOCTYPE html>
<html lang="en">
<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; }
.timer { font-size: 3em; font-weight: bold; }
.end-time { font-size: 2em; }
</style>
</head>
<body>
<div class="timer">
倒计时: <span id="countdown">00:00:10</span>
</div>
<script>
// 设置倒计时时间（单位：毫秒）
const endTime = new Date().getTime() + 10000;
function updateCountdown() {
const now = new Date().getTime();
const distance = endTime - now;
if (distance < 0) {
clearInterval(intervalId);
document.getElementById("countdown").innerHTML = "倒计时结束";
return;
}
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = hours + ":" + minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');
}
const intervalId = setInterval(updateCountdown, 1000);
</script>
</body>
</html>这段代码会创建一个简单的倒计时计时器，显示剩余的时、分、秒。倒计时时间设置为10秒，你可以通过修改endTime的值来设置不同的倒计时时长。计时器会在时间结束时自动停止，并显示"倒计时结束"。
评论已关闭