建立一个倒计时器网站-js教程-PHP中文网

建立一个倒计时器网站

PHPz

发布： 2024-08-14 12:37:20

原创

1050 人浏览过

Build a Countdown Timer Website

介绍

各位开发者大家好！今天，我很高兴分享我最近完成的一个项目：倒计时器。这个项目是学习和练习 JavaScript 的好方法，特别是在时间操作和 DOM 更新领域。无论您是想为活动、产品发布建立倒计时，还是只是一个有趣的计时器，这个项目都是一个完美的开始。

项目概况

倒计时器允许用户设置目标日期和时间，它会不断倒计时天、小时、分钟和秒，直到那一刻到来。计时器实时更新，提供视觉吸引力和响应式设计。该项目非常适合想要提高创建动态和交互式 Web 应用程序技能的开发人员。

特征

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

使用的技术

HTML：用于构建网页上的内容。
CSS：用于设计网页样式并确保响应能力。
JavaScript：实现计算剩余时间并实时更新 DOM。

项目结构

以下是项目结构的快速浏览：

Countdown-Timer/
├── index.html
├── style.css
└── script.js

登录后复制

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

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git

登录后复制

打开项目目录:
```
cd Countdown-Timer
```
登录后复制
运行项目:
- 您可以在本地服务器上运行它，也可以简单地在网络浏览器中打开index.html 文件。

用法

在网络浏览器中打开网站。
观看计时器倒计时到指定的结束日期。
在 script.js 文件中自定义结束日期以满足您的活动或要求。

代码说明

超文本标记语言

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>Countdown Timer</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="main">
      <div class="overlay">
        <div class="header">
          <h1>Countdown Timer</h1>
        </div>
        <div class="title">We are coming soon</div>
        <div class="title" id="end-date">4 July 2025 10:00 PM</div>
        <div class="col">
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Days</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Hours</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Minutes</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Seconds</label>
          </div>
        </div>
        <div class="footer">
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

登录后复制

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);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.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);
  border-color: transparent;
  border-radius: 5px;
  height: 50px;
  text-align: center;
  font-size: 20px;
}

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

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

登录后复制

JavaScript

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

const endDate = "4 July 2025 10:00 PM";

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

function countDown() {
  const end = new Date(endDate);
  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);

登录后复制