HTML实战课堂之倒计时页面

一、目录:

一、目录:

二、代码说明:

  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")`中的日期和时间。

三、完整代码:

html 复制代码
<!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>
相关推荐
tellmewhoisi4 分钟前
java8 List常用基本操作(去重,排序,转换等)
java·list
都叫我大帅哥34 分钟前
TOGAF应用架构阶段全解析:从理论到Java代码实战
java
Amagi.1 小时前
Java设计模式-建造者模式
java·设计模式·建造者模式
EmpressBoost1 小时前
谷粒商城170缓存序列化报错
java·spring·缓存
fouryears_234171 小时前
@PathVariable与@RequestParam的区别
java·spring·mvc·springboot
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
萌新小白的逆袭2 小时前
《Maven 核心基础笔记(第一天)》
java·开发语言·spring
一念&2 小时前
Java泛型
java
掉鱼的猫2 小时前
Solon 整合 LiteFlow 规则引擎:概念与实战
java·workflow
她说..2 小时前
Stream API流学习总结
java