建立一个倒计时器网站

介绍

各位开发者大家好！今天，我很高兴分享我最近完成的一个项目：倒计时器。这个项目是学习和练习 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 更新。

安装

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

1. 克隆存储库：
   

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

2. 打开项目目录:
   

   cd Countdown-Timer
   

3. 运行项目:

   • 您可以在本地服务器上运行它，也可以简单地在网络浏览器中打开index.html 文件。

用法

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

代码说明

超文本标记语言

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

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Countdown Timer6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    473a967da286a3c736825b4619e7dc30
      af42a90d66eb0ab7ffd90605d49bfcdb
        924ff17625d603f964501dd897c96cc6
          4a249f0d628e2318394fd9b75b4636b1Countdown Timer473f0a7621bec819994bb5020d29372a
        16b28748ea4df4d9c2150843fecfba68
        9e80a1cbb6fa0609753359a9577296d4We are coming soon16b28748ea4df4d9c2150843fecfba68
        40cf589a8d9222aac570db87a343584a4 July 2025 10:00 PM16b28748ea4df4d9c2150843fecfba68
        e70522973cfd5bc8e7f5270545f1ac4d
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Days8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Hours8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Minutes8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Seconds8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        ffd6ba4147bda351239915f463e46e38
          e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    35c1efb1a96c7fc3ad8e56d875e8f4062cacc6d41bbb37262a98f745aa00fbf0
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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);

现场演示

您可以在此处查看倒计时器的现场演示。

结论

构建这个倒计时器是一次宝贵的学习经历，它让我能够探索 JavaScript 在时间操作和 DOM 交互方面的功能。我希望这个项目能够激励您创建自己的动态和交互式应用程序。请随意探索代码、对其进行自定义并在您自己的项目中使用它。快乐编码！

制作人员

这个项目的灵感来自于对各种活动的简单有效的倒计时工具的需求。

作者

• 阿布舍克·古贾尔
  • GitHub 简介

以上是建立一个倒计时器网站的详细内容。更多信息请关注PHP中文网其他相关文章！