l-1

WEB教程

主页/前端笔记/JS笔记/如何创建 JavaScript 倒数计时器

如何创建 JavaScript 倒数计时器

在本 JavaScript 教程中，你将：

  • 为您的倒数计时器设计一个用户界面。
  • 实现倒数计时器的 JavaScript 逻辑。
  • 将 Timer Logic 与 Display 连接。
  • 处理倒计时的完成。

要充分利用本教程，对 Web 开发有基本的了解会有所帮助，包括熟悉 HTML 和 CSS。

一些以前的 JavaScript 经验（例如操作 HTML DOM 元素和处理事件）可能会有所帮助。但是，您不需要 JavaScript 的高级知识或倒数计时器的先前经验。

先决条件

在我们深入创建 JavaScript 倒数计时器之前，让我们确保我们都配备了正确的技能。

别担心，您无需成为 Web 开发专家即可开始，但掌握一些基础知识将使这段旅程更加顺畅和愉快。

如果您在这些区域中的任何一个生锈，请不要担心，没有压力！

您始终可以通过 JavaScript 课程来提高您的技能。请记住，我们是来帮忙的，所以不要犹豫，在 hackr.io 上搜索以寻求帮助。

一点 HTML

HTML 是任何网站的支柱。它就像一个房子的框架——必不可少和基础。

对于此项目，您应该熟悉基本的 HTML 标记（如 <div>、<p>、<span>）和 HTML 文档的结构。

如果您曾经在学校或 Web 开发课程中创建过一个简单的网页或玩过 HTML，那么您可以开始了！

基本 CSS 技能

CSS 是我们用来使网页漂亮的东西。这是我们 HTML 房子的室内设计。在这里，你应该知道如何使用 CSS 设置元素的样式——比如设置颜色、字体和基本布局属性（如边距和填充）。

如果你曾经发现自己在页面上玩颜色或对齐内容，那么你已经有足够的 CSS 知识来完成这个项目。

JavaScript 基础

JavaScript 是使我们的页面具有交互性的魔法。这就像在我们的 HTML 房子中添加智能家居功能一样。

您不需要成为 JavaScript 向导，但您应该了解变量、函数和事件处理等基础知识。

如果函数、事件侦听器或 Date 对象等术语对您来说听起来不太陌生，那么您已经准备好了！ 如果您需要快速复习，您可以随时参考 JavaScript 备忘单。

好奇和实验的头脑 

这可能是最重要的先决条件。最好的学习方式是实践、犯错和再试一次。

准备好实验、调整代码，甚至可能破坏一些东西（然后修复它们）。这就是我们学习和成长的方式！

您也可以考虑使用像 GitHub Copilot 这样的 AI 编码助手来提供帮助，但我建议您等到 100% 卡住，因为这是您真正学习的地方。

第 1 步：设置项目

好！让我们动手开始设置我们的项目。这一步就是为我们的倒数计时器奠定基础。

如果您想直接深入了解，我建议您使用我们的在线 JavaScript 编译器跟我一起学习。它预先填充了构建此 JavaScript 项目所需的 HTML、CSS 和 JavaScript 文件，而无需打开 IDE。

或者，我概述了您在自己的计算机上创建必要文件和组织工作区的步骤。只需遵循这些，您的项目就会打下坚实的基础。

i. 创建项目文件夹

首先，让我们保持整洁。在计算机上创建一个新文件夹，您将在其中存储此工程的所有文件。你可以将其命名为 countdown-timer 之类的名称。

ii. 初始化您的文件

在项目文件夹中，您将创建三个基本文件：

  • index.html：这将是您项目的主要 HTML 文件。
  • style.css：此 CSS 文件将保存您的所有样式规则，以使您的计时器看起来时髦。
  • script.js：这就是神奇的地方 – 你的 JavaScript 代码进入这个文件。

您可以使用 VSCode 和 Sublime Text 等代码编辑器，甚至是记事本等文本编辑器创建这些文件。只需确保使用正确的扩展名保存它们即可。

iii. 链接您的 CSS 和 JavaScript 文件

创建这些文件后，您需要将它们链接在一起。打开 index.html 文件，并在 CSS 的 <head> 标签中添加以下代码行：

<link rel="stylesheet" href="style.css">

在结束 </body> 标记之前，为 JavaScript 添加以下行：

<script src="script.js"></script>

iv. 在浏览器中打开您的项目

现在，让我们看看我们得到了什么。在 Web 浏览器中打开 index.html 文件。

你还不会看到太多 – 一张空白页 – 但这种情况即将改变。如果页面打开时没有任何错误，则一切就绪！

v. 准备好你的工具

在执行后续步骤时，请保持代码编辑器和 Web 浏览器并排打开。这将允许您更改代码并立即在浏览器中看到结果。

好了！您已经成功设置了您的项目，并已准备好深入研究激动人心的部分。

让我们继续第 2 步，在这里我们将开始制作 HTML 结构。

第 2 步：构建 HTML 结构

项目设置完成后，是时候使用 HTML 奠定基础了。

此步骤是关于创建我们的 Countdown Timer 的结构。我们将定义计时器的每个元素在网页上的位置。让我们开始吧！

i. 从基本 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>Countdown Timer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- We'll add our timer elements here -->
  <script src="script.js"></script>
</body>
</html>

这是每个 HTML 项目和页面开始的基本结构。我们有 DOCTYPE、HTML 标签、head 部分（带有 meta 标签、标题和指向 CSS 文件的链接）以及我们的内容将要去的正文。

ii. 添加计时器显示

在 <body> 标签中，我们将在此处添加计时器的元素。我们将保持简单但实用：

<div id="countdown">
  <p id="timer">
      <span id="days"></span>
      <span class="timer-unit">Days</span>
      <span id="hours"></span>
      <span class="timer-unit">Hours</span>
      <span id="minutes"></span>
      <span class="timer-unit">Minutes</span>
      <span id="seconds"></span>
      <span class="timer-unit">Seconds</span>
  </p>
</div>

以下是我们所做的：

  • 创建了一个 ID 为 countdown 的 div。这是我们的计时器的主要容器。
  • 在 div 中，我们放置了一个 带有 ID 计时器的 p 元素。
  • 然后，我们为每个时间单位（天、小时、分钟、秒）及其标签添加了 span 元素。ID（天、小时、分钟、秒）将在我们的 JavaScript 中用于动态更新计时器。

iii. 检查您的工作

保存 index.html 文件并在浏览器中刷新页面。您不会看到任何内容，因为我们尚未添加任何内容或样式，但您正在确保到目前为止没有错误。如果您的页面加载没有问题，那么您就走在正确的轨道上！

iv. 了解 HTML 结构

  • <！DOCTYPE html> 声明定义文档类型和 HTML 版本。这对于确保您的网页在不同的 Web 浏览器上正常运行至关重要。
  • <html lang=“en”> 标签设置文档的语言，这对于辅助功能和搜索引擎优化 （SEO） 非常重要。
  • 在 <head> 中，我们有用于字符集和视口设置的 meta 标记，确保您的网站在移动设备上运行良好。<title> 为您的页面提供标题，<link> 标签连接您的 CSS 文件以设置页面样式。
  • <body> 是网页可见部分所在的位置。在这里，我们已经开始概述计时器的结构，它很快就会通过 CSS 和 JavaScript 实现。

v. 无障碍功能提示

虽然我们专注于功能和外观，但最好牢记辅助功能。

例如，将 aria-label 属性添加到您的 timer 元素可以使使用屏幕阅读器的用户更容易访问它。这目前可能有点高级，但当您深入研究 Web 开发时，需要记住这一点。

瞧！您已成功设置倒数计时器的基本 HTML 结构。它可能看起来还不多，但这是我们下一步中构建和装饰的骨架。

干得好 – 让我们继续保持势头，继续进行第 3 步，我们将为计时器添加一些风格！

第 3 步：使用 CSS 设置样式

现在我们的 HTML 框架已经就位，是时候用一些 CSS 魔法来装扮它了！

这一步就是为我们的倒数计时器添加样式，将其从单纯的结构转变为我们网页上引人注目的组件。

让我们释放我们内心的设计者，开始吧！

i. 从基本样式开始

打开 style.css 文件。首先，我们将设置一些基本样式，以确保我们的计时器在任何设备上看起来都不错

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  color: white;
}

以下是我们正在做的事情：

  • 设置通用字体以实现一致性。
  • 使用 Flexbox 将我们的计时器垂直和水平居中。
  • 将身体的高度设置为全屏效果的完整视口高度 （100vh）。
  • 添加酷炫的渐变背景以获得现代外观。
  • 将文本颜色设置为白色以进行对比。

ii. 设置倒数计时器的样式

现在，让我们专注于设置倒数计时器本身的样式：

#countdown {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px 60px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  text-align: center;
}

#timer {
  font-size: 3rem;
  letter-spacing: 3px;
}

.timer-unit {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  display: block;
}

在这些风格中，我们是：

  • 使用半透明背景、填充和圆角，打造时尚外观。
  • 为深度添加阴影。
  • 设置字体大小、字母间距和排版属性，使计时器可读且时尚。

iii. 保存和刷新

添加这些样式后，保存 style.css 文件。返回浏览器并刷新您index.html打开的页面。

您现在应该看到一个漂亮的计时器布局，居中并设置样式，为动态倒计时功能做好准备。

iv. 尝试样式

这是您的画布，因此您可以随意尝试各种样式。更改字体大小、颜色、背景，或添加您喜欢的任何其他 CSS 属性。

这个实验不仅有趣，而且是了解有关 CSS 及其如何与 HTML 元素交互的更多信息的好方法。

请记住，设计没有对错之分——这一切都取决于什么吸引您和您的观众。

v. 响应式设计考虑

作为额外的挑战，请尝试让您的计时器响应。这意味着它应该在各种尺寸的设备上看起来不错，从大型桌面显示器到较小的移动屏幕。

您可以在 CSS 中使用媒体查询，根据设备的屏幕大小调整样式。例如：

@media (max-width: 600px) {
  #timer {
      font-size: 2rem;
  }
  .timer-unit {
      font-size: 1rem;
  }
}

此媒体查询在宽度小于 600 像素的屏幕上减小计时器及其单位的字体大小，使其更适合移动设备。

好了！您现在已经为计时器添加了样式，使其不仅功能强大，而且具有视觉吸引力。

完成这一步真是太棒了！接下来，我们将深入探讨 Web 开发项目的核心 – 添加 JavaScript 以使我们的计时器对特定事件进行倒计时。

第 4 步：JavaScript – 使用日期

我们现在正在冒险进入 JavaScript 世界，让我们的倒数计时器栩栩如生。在此步骤中，我们将重点介绍日期，这对我们的计时器功能至关重要。

我们将设置目标日期并熟悉 JavaScript 的 Date 对象。让我们开始编码吧！

i. 了解 Date 对象

打开 script.js 文件。JavaScript 的 Date 对象是处理日期和时间的强大工具。首先，让我们创建一个表示当前日期和时间的新 Date 对象：

const currentDate = new Date();
console.log(currentDate); // This logs the current date and time to the console

这行代码创建一个新的 Date 对象，并将其分配给变量 currentDate。

如果您打开浏览器的控制台，您将看到打印出的当前日期和时间。这是验证一切是否正常工作的好方法。

如果您不确定如何执行此操作，通常可以通过浏览器开发工具菜单选项或使用 F12 快捷方式来访问它。

ii. 设定目标日期

对于我们的倒数计时器，我们需要一个目标日期来倒计时。让我们设置一下：

const targetDate = new Date('YYYY-MM-DDTHH:MM:SS'); // Replace with target
console.log(targetDate); // Check the target date in the console

将 ‘YYYY-MM-DDTHH：MM：SS’ 替换为您要倒计时的实际日期和时间。

请注意，这遵循 ISO 8601 标准，该标准在 JavaScript 中通常用于日期时间字符串。请注意使用 T 分隔符来区分日期和时间组件。

因此，我们有一个 year-month-day 和 hour：minute：second 的格式。例如，2024-12-31T23：59：59 将是 2024 年的年底。

iii. 计算差额

为了使我们的倒计时工作，我们需要计算当前日期和目标日期之间的差值。

我们将在下一步中编写的 JavaScript 函数中执行此操作。现在，请了解差异将以毫秒为单位计算：

const difference = targetDate - currentDate;
console.log(difference); // This will log the difference in milliseconds

这将为我们提供当前日期和目标日期之间的总毫秒数。

iv. 打破差异

在接下来的步骤中，我们将把这种差异分解为天、小时、分钟和秒，它们将显示在我们的计时器上。

v. 测试我们的设置

编写这些代码行后，保存 script.js 文件并刷新浏览器。确保您在控制台中看到正确的当前日期、目标日期和计算的差异。

此步骤可确保在我们继续实际的倒计时功能之前正确设置日期计算。

太棒了！你现在已经为 JavaScript 中的倒数计时器功能奠定了基础。在下一步中，我们将更深入地研究 JavaScript 代码，创建将动态更新我们的倒数计时器的函数。

第 5 步：JavaScript – 实现倒计时逻辑

是时候让我们的倒数计时器滴答作响了！在此步骤中，我们将使用 JavaScript 实现计时器的核心功能。

我们将创建一个每秒更新倒计时的函数，使我们更接近目标事件。让我们深入了解我们项目的核心。

i. 创建 Update 函数

在您的 script.js 文件中，我们将编写一个名为 updateCountdown 的函数。此函数将计算剩余时间并相应地更新我们的 HTML 元素：

function updateCountdown() {
  const currentTime = new Date();
  const difference = targetDate - currentTime;

  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);

  document.getElementById("days").innerText = days;
  document.getElementById("hours").innerText = hours;
  document.getElementById("minutes").innerText = minutes;
  document.getElementById("seconds").innerText = seconds;

以下是此函数中发生的情况：

  • 我们计算 targetDate 和 currentTime 之间的差值。
  • 然后，我们将此差异分解为天、小时、分钟和秒。
  • 每个时间单位的计算方法是将差值除以该单位的毫秒数。
  • Math.floor（） 用于向下舍入到最接近的整数。
  • 最后，我们使用这些计算值更新 HTML 元素。

ii. 设置间隔

为了使我们的倒计时实时更新，我们将使用 setInterval 每秒调用一次我们的 updateCountdown 函数：

const interval = setInterval(updateCountdown, 1000);
  • setInterval（） 是一个 JavaScript 函数，它重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。在这里，它设置为 每 1000 毫秒（即 1 秒）调用一次 updateCountdown。
  • interval 是一个存储 interval ID 的变量，如果需要，我们可以使用它来稍后停止 interval。

iii. 处理倒计时完成

在我们的 updateCountdown 函数中，我们需要处理当倒计时达到零时会发生什么。我们将添加一个条件来停止倒计时并显示一条消息：

if (difference < 0) {
  clearInterval(interval);
  document.getElementById("timer").innerText = "The event has started!";
}
  • clearInterval（间隔））;在达到或超过目标日期时停止倒计时。
  • 然后，我们更新 timer 元素的文本以指示事件已启动。

iv. 测试倒数计时器

保存 script.js 文件并在浏览器中打开 （或刷新） index.html。您现在应该看到倒数计时器正在向目标日期和时间主动滴答作响。

v. 故障排除

如果计时器未按预期工作，请检查以下几点：

  • 确保您的目标日期正确设置在将来。
  • 检查控制台是否有任何 JavaScript 错误。
  • 确保 JavaScript 中的 ID 与 HTML 中的 ID 匹配。

祝贺！您刚刚实现了倒数计时器的核心功能！

这是一个重要的里程碑，因为您将 JavaScript 逻辑与动态 HTML 操作相结合，创建了交互式和有用的内容。

在接下来的步骤中，我们将完成我们的项目并对其进行全面测试。继续努力！

第 6 步：JavaScript – 动态更新 HTML

惊人的进步！我们的倒数计时器正在滴答作响，但让我们把它提高一个档次。

在此步骤中，我们将确保我们的 JavaScript 实时无缝更新 HTML 元素。

这就是让我们的计时器与用户的浏览器交互的原因，在倒计时发生时显示倒计时。让我们开始吧！

i. 使用 JavaScript 定位 HTML 元素

  • 我们已经在 updateCountdown 函数中编写了代码来计算时间单位（天、小时、分钟和秒）。现在，让我们确保这些值正确显示在相应的 HTML 元素中。
  • 每个时间单位都有自己的 <span> 在我们的 HTML 中有一个唯一的 ID。我们在 JavaScript 中使用 document.getElementById（） 来定位这些元素并更新它们的内容。

ii. 动态内容更新

在 updateCountdown 函数中，计算时间单位后，我们可以添加以下几行：

document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
  • 这些行动态更新 <span> 元素的内容，包括天、小时、分钟和秒。
  • innerText 是一个属性，用于设置或返回指定元素的文本内容。在这里，它用于显示倒数计时器的当前值。

iii. 测试动态更新

  • 将这些更新添加到脚本后，保存 script.js 文件并刷新浏览器。
  • 观看倒数计时器。您应该会看到数字实时变化，准确地倒计时到您的目标日期。

iv. 确保同步

  • 请务必确保倒计时每隔一秒更新一次，以保持准确性。我们使用的 setInterval 方法就是为此目的而设计的，但仔细检查总是好的。
  • 观察计时器一两分钟，以确保它正确一致地更新。

v. 调试

  • 如果数字没有变化或您发现任何异常情况，请检查 Web 浏览器中的控制台是否有任何错误消息。
  • 常见问题可能包括 JavaScript 代码中的拼写错误、HTML 和 JavaScript 之间的 ID 名称不匹配或时间计算中的逻辑错误。

vi. 提升用户体验

考虑在倒计时达到零时为用户提供更多反馈，例如更改背景颜色或显示动画效果。这可以使倒计时结束的那一刻更加令人兴奋和引人注目。

vii. 代码优化

查看您的代码，看看是否有任何机会使其更高效或更具可读性。例如，如果要重复类似的代码行，则可以创建一个函数来处理这些重复性任务。

viii. 跨浏览器测试

最后，确保您的倒数计时器在不同的 Web 浏览器中运行良好。有时，不同的浏览器可能会以不同的方式处理 JavaScript 和 CSS，因此最好在至少几个不同的浏览器（如 Chrome、Firefox 和 Edge）中测试计时器。

祝贺！您现在已经成功地将动态 HTML 更新与 JavaScript 集成，这是 Web 开发中的一项关键技能。

您的倒数计时器不仅仅是一个静态显示;它是您网页上一个活生生的、滴答作响的时钟。

接下来，我们将结束我们的项目并讨论一些最后的润色和您可能会考虑的其他功能。走到这一步真是太棒了！

第 7 步：JavaScript – 完成和测试

我们快要到达终点线了！在此步骤中，我们将完成倒数计时器，确保一切顺利且看起来很棒。

我们还将进行一些必要的测试，以确保我们的计时器为现实世界做好准备。让我们对 JavaScript 项目进行最后的润色。

i. 查看完整代码

请花点时间查看所有三个文件（index.html、style.css script.js）中的代码。确保一切都整洁、注释良好且井井有条。

干净的代码更易于理解、调试和维护。确保您的 CSS 一致，并且您的 JavaScript 函数按预期工作。

ii. 测试倒数计时器

  • 刷新 index.html 页面并观察倒数计时器。它应该每秒准确地滴答作响。
  • 检查计时器是否在正确的目标日期和时间达到零，以及它是否适当地显示结束消息（“The event has started！”）。

iii. 响应性检查

  • 调整浏览器窗口的大小或在不同设备（如智能手机或平板电脑）上测试页面，以确保计时器响应迅速，并且在各种屏幕尺寸上看起来都不错。
  • 如果计时器在不同设备上的外观有任何问题，请相应地调整您的 CSS。这可能涉及使用媒体查询调整字体大小、填充或布局属性。

iv. 排查常见问题

  • 如果您遇到任何问题，例如计时器未正确显示或未按预期倒计时，请再次检查您的代码并查找任何错误或拼写错误。
  • 使用浏览器的开发人员工具调试任何问题。控制台对于识别 JavaScript 错误特别有用。

v. 用户体验增强

  • 请考虑添加其他功能以获得更好的用户体验，例如随着事件的临近而变化的消息或在倒计时完成时触发的动画。
  • 确保所有用户反馈都清晰易懂。例如，如果计时器用于在不同时区发生的事件，请考虑显示该信息。

vi. 最终验证

  • 使用在线验证工具验证您的 HTML 和 CSS，以确保它们遵循当前的 Web 标准。这对于跨浏览器兼容性和整体性能至关重要。
  • 检查是否存在任何辅助功能问题，例如适当的对比度和屏幕阅读器兼容性，以使您的计时器对所有用户都具有包容性。

vii. 收集反馈

  • 如果可能，请让其他人测试您的计时器。一双全新的眼睛通常可以发现您错过的问题。
  • 征求有关功能和设计的反馈，并愿意根据这些反馈进行改进。

干得漂亮！您现在已经完成了构建和测试 Countdown Timer 的所有基本步骤。

您不仅创建了一个功能性 Web 组件，还确保了它强大、响应迅速且用户友好。

我们现在将讨论后续步骤以及您如何在此项目的基础上进行未来的学习和发展。

下一步和进一步学习

太棒了！您已经成功构建了一个动态 JavaScript 倒数计时器，它看起来很棒。但旅程并没有就此结束。

让我们探索一些后续步骤和想法，以进一步学习，以保持您的 Web 开发技能不断增长。

JavaScript 的世界广阔无垠，总有新的和令人兴奋的东西等着你学习！

添加新功能

  • 自定义选项：允许用户设置自己的目标日期和时间，可能通过带有输入字段的用户界面。
  • 时区支持：增强您的计时器以处理不同的时区，使其对全球受众有用。
  • Visual Countdown（可视倒计时）：创建倒计时的图形表示形式，例如随着时间的流逝而耗尽的圆形进度条。
  • 声音和警报：添加一个选项，用于在倒计时达到零时设置闹钟或声音效果。

优化和重构

  • 代码优化：寻找提高代码效率和简化的方法。可以重写任何部分以使其更简洁或更快吗？
  • 设计改进：尝试不同的设计元素。尝试新的配色方案、字体或布局更改，以增强视觉吸引力。
  • 跨浏览器测试：确保您的计时器在所有主要浏览器上无缝运行并修复任何兼容性问题。

了解有关 JavaScript 和 Web 技术的更多信息

  • 探索 JavaScript 框架：深入了解 React、Angular 或 Vue.js 等 JavaScript 框架。这些工具可以帮助您构建更复杂和交互式的 Web 应用程序。
  • 响应式设计技术： 了解有关创建适应不同屏幕大小和设备响应式 Web 设计的更多信息。
  • Web 性能：了解如何使您的 Web 应用程序更快、更高效。

加入在线社区并进行协作

通过论坛、社交媒体群组或本地聚会与其他开发人员互动。协作和社区参与是学习和成长的好方法。您也可以成为 hackr.io 社区的一员，我们很乐意拥有您！

紧跟趋势和最佳实践

Web 开发和 JavaScript 一直在发展，因此请通过关注博客、参加网络研讨会和参加在线课程来了解最新情况。

记录和分享您的学习旅程

考虑在博客上发布有关您的项目的博客或在 GitHub 等平台上分享。记录您的流程并与他人分享可能是一种有益的体验，更不用说获得反馈或建立新网络连接的好方法了。

定期挑战自己

参加编码挑战赛或黑客马拉松。这些可能是突破极限和学习新事物的绝佳机会。

如果你渴望更多的 JavaScript 项目，请查看我们其余的分步教程，包括：

  • 如何创建 JavaScript 待办事项列表
  • 如何在 JavaScript 中构建井字棋游戏

通过完成这个 JavaScript 项目，您已经在 Web 开发之旅中迈出了重要的一步。此外，您现在有了一些有形的东西可以添加到您的投资组合中。

请记住，每个专家都曾经是初学者。继续构建，不断实验，最重要的是，享受其中的乐趣！Web 开发的世界就是您的牡蛎。

JavaScript Countdown Timer 完整源代码

现在您已经按照上面的步骤操作了，您完成的源代码文件应该类似于我在下面包含的这些文件。

同样，如果您发现自己在任何时候遇到困难，请查看这些文件以获得一些帮助。

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 id="countdown">
      <p id="timer">
          <span id="days"></span>
          <span class="timer-unit">Days</span>
          <span id="hours"></span>
          <span class="timer-unit">Hours</span>
          <span id="minutes"></span>
          <span class="timer-unit">Minutes</span>
          <span id="seconds"></span>
          <span class="timer-unit">Seconds</span>
      </p>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS 源代码：

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  color: white;
}

#countdown {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px 60px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  text-align: center;
}

#timer {
  font-size: 3rem;
  letter-spacing: 3px;
}

.timer-unit {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  display: inline;
}

JavaScript 源代码：

const targetDate = new Date('YYYY-MM-DDTHH:MM:SS'); // Set your target

function updateCountdown() {
  const currentTime = new Date();
  const difference = targetDate - currentTime;

  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);

  document.getElementById("days").innerText = days;
  document.getElementById("hours").innerText = hours;
  document.getElementById("minutes").innerText = minutes;
  document.getElementById("seconds").innerText = seconds;

  if (difference < 0) {
      clearInterval(interval);
      document.getElementById("timer").innerText = "The event has started!";
  }
}

const interval = setInterval(updateCountdown, 1000);

使用 HTML、CSS 和 JavaScript 构建 JavaScript 倒数计时器是提高 Web 开发技能、探索新技术和深入研究动态 Web 应用程序世界的绝佳方式。

通过开发这个 JavaScript 倒数计时器，您已经解决了各种挑战，包括制作一个引人入胜的用户界面、在 JavaScript 中实现实时逻辑以及根据计时器的状态动态更新网页。

在本教程中，您学习了如何：

  • 使用 HTML 和 CSS 为您的倒数计时器设计视觉上吸引人的布局。
  • 编写 JavaScript 以实现倒计时的逻辑，准确跟踪距离指定事件的时间。
  • 使用 JavaScript 动态更新 HTML 内容，确保您的计时器反映实时更改。
  • 处理倒计时的完成，在达到目标时间后向用户提供反馈和选项。

您现在拥有进一步增强此 JavaScript 倒数计时器的工具和知识，包括添加用户输入以设置目标时间、合并音效，甚至将其集成到更大的 Web 应用程序中。