当前位置：首页 > article >正文

HTML实战课堂之倒计时页面

article 2025/1/11 19:22:48

一、目录：

二、代码说明：

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>

查看全文

http://www.kler.cn/a/488488.html