实现动态倒计时功能是Web开发中常见的需求之一，JS是实现这一功能的重要工具之一。下面我会为你详细讲解如何使用JS实现动态倒计时，并提供两个详细的示例说明。

编写HTML结构

首先需要在HTML页面中添加需要倒计时的元素，可以使用HTML5中的<time>元素来显示时间。在这个例子中，我们将需要倒计时的元素放在<div>标签中。

<div id="countdown">
  <time datetime="2022-01-01T00:00:00"></time>
</div>

JS实现倒计时功能

接下来是JS实现倒计时功能的关键代码。通过使用setInterval()函数每隔一段时间更新时间，然后根据时间计算出天数、小时、分钟和秒数，最后将结果显示在页面上。

// 获取需要倒计时的时间
const countdownDate = new Date("2022-01-01T00:00:00").getTime();

// 更新倒计时的函数
const updateCountdown = () => {
  // 获取当前时间
  const now = new Date().getTime();

  // 计算时间差
  const difference = countdownDate - now;

  // 计算天数、小时、分钟和秒数
  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);

  // 更新HTML页面
  const countdownElement = document.querySelector("#countdown time");
  countdownElement.innerHTML = `${days} 天 ${hours} 时 ${minutes} 分 ${seconds} 秒`;
};

// 每隔1秒更新倒计时
setInterval(updateCountdown, 1000);

示例一

现在，我们将使用这个倒计时函数来实现一个简单的倒计时页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>倒计时页面</title>
</head>
<body>
  <div id="countdown">
    <time datetime="2022-01-01T00:00:00"></time>
  </div>
  <script>
    const countdownDate = new Date("2022-01-01T00:00:00").getTime();

    const updateCountdown = () => {
      const now = new Date().getTime();
      const difference = countdownDate - now;
      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);
      const countdownElement = document.querySelector("#countdown time");
      countdownElement.innerHTML = `${days} 天 ${hours} 时 ${minutes} 分 ${seconds} 秒`;
    };

    setInterval(updateCountdown, 1000);
  </script>
</body>
</html>

这样就可以得到一个简单的页面，显示距离指定日期的倒计时。

示例二

接下来，我们将使用这个倒计时函数来实现一个更复杂的倒计时页面。这个页面可以让用户自定义目标日期，并显示倒计时的时间。同时，还可以使用动画效果来让页面更加生动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态倒计时页面</title>
  <style>
    .countdown-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #333;
      color: #fff;
      font-size: 3rem;
      text-shadow: 1px 1px 2px #000000;
    }

    .counter {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 75%;
      height: 75%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    .countdown-element {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 6rem;
      text-shadow: 1px 1px 1px #000000;
    }

    .countdown-label {
      font-size: 1.5rem;
      text-transform: uppercase;
    }

    .separator {
      font-size: 6rem;
    }

    .countdown-element + .separator {
      flex-basis: 5%;
      text-align: center;
    }

    .countdown-element:first-child + .separator {
      display: none;
    }

    .counter.active {
      animation: flash 1s infinite;
    }

    @keyframes flash {
      from, 25%, 50%, 75%, to {
        transform: scale(1);
      }
      10%, 30%, 70%, 90% {
        transform: scale(1.1);
      }
      40%, 60% {
        transform: scale(1.2);
      }
      80% {
        transform: scale(0.9);
      }
    }
  </style>
</head>
<body>
  <div class="countdown-wrapper">
    <div class="counter">
      <div class="countdown-element days">
        <span class="countdown-time">0</span>
        <span class="countdown-label">Days</span>
      </div>
      <div class="separator">:</div>
      <div class="countdown-element hours">
        <span class="countdown-time">0</span>
        <span class="countdown-label">Hours</span>
      </div>
      <div class="separator">:</div>
      <div class="countdown-element minutes">
        <span class="countdown-time">0</span>
        <span class="countdown-label">Minutes</span>
      </div>
      <div class="separator">:</div>
      <div class="countdown-element seconds">
        <span class="countdown-time">0</span>
        <span class="countdown-label">Seconds</span>
      </div>
    </div>
  </div>
  <script>
    const countdownElements = document.querySelectorAll(".countdown-element");
    const countdownTimes = document.querySelectorAll(".countdown-time");
    const separatorElements = document.querySelectorAll(".separator");
    const counter = document.querySelector(".counter");

    const updateCountdown = () => {
      const targetDate = new Date(document.getElementById("targetDate").value);
      const now = new Date();
      const difference = targetDate - now;
      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);
      countdownTimes[0].innerHTML = days < 10 ? "0" + days : days;
      countdownTimes[1].innerHTML = hours < 10 ? "0" + hours : hours;
      countdownTimes[2].innerHTML = minutes < 10 ? "0" + minutes : minutes;
      countdownTimes[3].innerHTML = seconds < 10 ? "0" + seconds : seconds;
    };

    const flashCounter = () => {
      counter.classList.add("active");
      setTimeout(() => {
        counter.classList.remove("active")
      }, 1000);
    };

    setInterval(() => {
      updateCountdown();
      flashCounter();
    }, 1000);
  </script>
</body>
</html>

这样，我们就得到了一个外观非常华丽的动态倒计时页面。用户可以使用页面上的输入框来输入目标日期，并自动开始倒计时。同时，还添加了闪烁的动画效果来吸引用户的注意力。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现动态倒计时功能（天数、时、分、秒） - Python技术站

JS实现动态倒计时功能（天数、时、分、秒）

编写HTML结构

JS实现倒计时功能

示例一

示例二

相关文章