使用 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 { padding: 10px; background: #f0f0f0; margin-top: 20px; }
.timer strong { font-size: 200%; }
</style>
</head>
<body>
<div class="timer">倒计时结束时间：<strong id="countdown"></strong></div>
<script>
// 设置倒计时结束时间（单位：毫秒）
const endTime = new Date('Jan 01, 2023 00:00:00').getTime();
// 更新倒计时显示
function updateCountdown() {
const now = new Date().getTime();
const distance = endTime - now;
if (distance < 0) {
clearInterval(intervalId);
document.getElementById('countdown').innerHTML = '倒计时已经结束';
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
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 = days + '天 ' + hours + '小时 '
+ minutes + '分 ' + seconds + '秒';
}
// 每秒更新倒计时
const intervalId = setInterval(updateCountdown, 1000);
</script>
</body>
</html>这段代码会创建一个简单的倒计时计时器，显示直到2023年1月1日的剩余时间。当倒计时结束时，计时器会清除并显示消息"倒计时已经结束"。这个示例提供了一个基本的倒数计时器实现，并且可以通过调整endTime变量的值来设置不同的结束时间。
评论已关闭