返回

巧用 JavaScript：打造简洁倒数计时器，18 行代码搞定！

前端

在当今快节奏的世界中，时间就是金钱。无论是活动预告、销售倒计时还是游戏计时，我们都希望能够准确、高效地追踪时间。如果您是一位网页开发者或爱好者，您可能会考虑使用 JavaScript 来构建一个倒数计时器。毕竟，JavaScript 是一种强大的编程语言，可以轻松实现各种交互式功能。

使用 JavaScript 构建倒数计时器的好处显而易见：

  • 轻量级： JavaScript 代码非常精简，不会对您的网页造成不必要的负担。
  • 可定制： 您可以根据自己的需求和喜好，轻松定制计时器的外观和功能。
  • 实用性： 倒数计时器在各种场景中都有着广泛的应用，例如活动预告、销售倒计时、游戏计时等。

接下来，我们将一步一步地为您展示如何仅用 18 行 JavaScript 代码构建一个倒数计时器。

  1. HTML 结构：

首先，我们需要在 HTML 文档中添加必要的 HTML 结构。

<div id="countdown"></div>

<div id="countdown"></div> 元素将用作计时器的容器。

  1. JavaScript 代码：

接下来，让我们编写 JavaScript 代码来实现计时器功能。

// 获取距离目标日期的毫秒数
const targetDate = new Date("2023-12-31 23:59:59").getTime();
const now = new Date().getTime();
const diff = targetDate - now;

// 将毫秒数转换为天、时、分、秒
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

// 将计算结果显示在 HTML 元素中
document.getElementById("countdown").innerHTML =
  "<p>" +
  days +
  " 天 " +
  hours +
  " 时 " +
  minutes +
  " 分 " +
  seconds +
  " 秒 " +
  "</p>";

// 每秒更新计时器
setInterval(() => {
  const now = new Date().getTime();
  const diff = targetDate - now;

  // 将毫秒数转换为天、时、分、秒
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // 将计算结果显示在 HTML 元素中
  document.getElementById("countdown").innerHTML =
    "<p>" +
    days +
    " 天 " +
    hours +
    " 时 " +
    minutes +
    " 分 " +
    seconds +
    " 秒 " +
    "</p>";
}, 1000);

这段 JavaScript 代码非常简单易懂。首先，我们获取距离目标日期的毫秒数。然后，我们将毫秒数转换为天、时、分、秒。最后，我们将计算结果显示在 HTML 元素中。

  1. 效果展示：

将 HTML 代码和 JavaScript 代码添加到您的网页中，您就会看到一个倒数计时器出现在网页上。计时器将显示距离目标日期的天、时、分、秒。

这就是如何使用 JavaScript 构建一个倒数计时器的全部过程。您可以在此基础上，根据自己的需求进行进一步的定制，例如更改计时器的外观、添加更多功能等等。希望本文对您有所帮助！