建立一个倒计时器

Lemon黄

发布于 2024-08-19 15:11:52

1090

发布于 2024-08-19 15:11:52

文章被收录于专栏：Lemon黄

介绍

通过创建一个倒计时网站，来学习和练习Javascript，特别是关于时间操作和 DOM 更新。

概况

倒计时器允许用户设置目标日期和时间，它会连续倒计时天、小时、分钟和秒，直到倒计时结束。计时器实时更新，提供视觉吸引力和响应式设计。

功能

实时倒计时：计时器每秒更新一次，显示到指定日期为止的剩余时间。
响应式设计：布局无缝适应不同的设备和屏幕尺寸。
可设置的结束日期：可以轻松修改目标日期和时间，使计时器适用于各种事件。

使用的技术

html：用于构建网页上的内容。
css：用于设计网页样式并确保响应能力。
Javascript：实现计算剩余事件并实时更新 DOM。

项目结构

countdown-timer/
├── index.html
├── style.css
└── script.js

index.html：包含网页的 HTML 结构
style.css：保存 css 样式，包含响应式设计规则
script.js：使用 JavaScript 管理倒计时逻辑和 DOM 更新。

构建步骤

创建项目

开始项目，先按照项目结构创建号文件夹和文件。

打开目录

cd countdown-timer

运行项目

可以在本地服务器上运行它，也可以通过 web 浏览器直接打开 index.html 文件。

index.html

index.html文件包含网页的结构，包括倒计时显示和简单的标题。下面是 HTML 代码片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时器</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="main">
      <div class="overlay">
        <div class="header">
          <h1>倒计时器</h1>
        </div>
        <div class="title">我们即将到来</div>
        <div class="title" id="end-date">2025-08-08 10:00</div>
        <div class="col">
          <div>
            <input type="text" readonly value="0">
            

            <label>天</label>
          </div>
          <div>
            <input type="text" readonly value="0">
            

            <label>时</label>
          </div>
          <div>
            <input type="text" readonly value="0">
            

            <label>分</label>
          </div>
          <div>
            <input type="text" readonly value="0">
            

            <label>秒</label>
          </div>
        </div>
        <div class="footer">
          <p>Made with ❤️ by zerokk</p>
        </div>
      </div>
    </div>
    <!-- 引入脚本文件 -->
    <script src="./script.js"></script>
  </body>
</html>

style.css

style.css文件包含确保网页具有视觉吸引力的样式，并包括对不同屏幕尺寸的响应能力。以下是一些关键样式：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.main {
    width: 100%;
    height: 100vh;
    background: url(./images/bg.jpg) no-repeat center center;
    background-size:cover;
}

.overlay {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.title {
    color: white;
    text-align: center;
    font-size: 2.5rem;
    padding: 25px;
}

.col {
    margin-top: 10px;
    width: 1000px;
    color: white;
    justify-content: center;
    display: flex;
}

.col div {
    width: 250px;
    text-align: center;
}

input {
    background-color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
    border-radius: 5px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    color: white;
}

.header {
    margin: 40px;
    text-align: center;
}

.footer {
    margin: 300px;
    text-align: center;
}

script.js

script.js文件管理倒计时逻辑，每秒更新一次显示。下面是 JavaScript 代码的片段：

const endData = "2025-08-08 10:00";

document.getElementById("end-date").innerText = endData;
const input = document.querySelectorAll("input");

function countDown() {
    const end = new Date(endData);
    const now = new Date();
    const diff = (end - now) / 1000;

    if (diff < 0) return;

    input[0].value = Math.floor(diff / 3600 / 24);
    input[1].value = Math.floor(diff / 3600 % 24);
    input[2].value = Math.floor(diff / 60 % 60);
    input[3].value = Math.floor(diff % 60);
}

countDown();
setInterval(countDown, 1000);