一、目录：
一、目录：
二、代码说明：
1. **HTML部分**：
2. **CSS部分**：
3. **JavaScript部分**：
三、完整代码：
读前小提示：
要创建一个自定义背景的倒计时网页，这里使用HTML、CSS和JavaScript。
今天带小白入门一个简单的倒计时页面
以下是一个简单的示例
二、代码说明：
1. **HTML部分**：
包含一个`div`元素用于显示倒计时。
2. **CSS部分**：
设置了页面的背景图片以及倒计时容器的样式。
3. **JavaScript部分**：
实现了倒计时功能，每秒更新一次显示的时间。
代码提醒：
你需要将`your-background-image.jpg`替换为你自己的背景图片路径。如果需要更改倒计时结束时间，可以修改`new Date("Dec 31, 2023 23:59:59")`中的日期和时间。
三、完整代码：
<!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 {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-image: url('your-background-image.jpg'); /* 替换为你的背景图片 */background-size: cover;background-position: center;font-family: Arial, sans-serif;}.countdown-container {text-align: center;background: rgba(255, 255, 255, 0.8);padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.countdown {font-size: 48px;margin: 20px 0;}</style>
</head>
<body><div class="countdown-container"><div id="countdown" class="countdown"></div></div><script><!-- 设置倒计时结束时间 -->const countDownDate = new Date("Dec 31, 2025 23:59:59").getTime();<!-- 更新倒计时每秒一次 -->const x = setInterval(function() {// 获取当前时间const now = new Date().getTime();// 计算剩余时间const distance = countDownDate - now;// 计算天、小时、分钟和秒数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 + "d " + hours + "h "+ minutes + "m " + seconds + "s ";// 如果倒计时结束，显示一条消息if (distance < 0) {clearInterval(x);document.getElementById("countdown").innerHTML = "倒计时结束";}}, 1000);</script>
</body>
</html>
