JS动态显示倒计时效果

2023年5月27日下午4:30 • JavaScript

JS动态显示倒计时效果是网页开发中经常使用的效果之一，具体可以分为以下几个步骤：

步骤一：HTML布局与样式

首先，我们需要在HTML中布置好倒计时的结构，通常是一个包含了时、分、秒的块级元素，例如：

<div id="countdown">
  <span id="hour"></span>:
  <span id="minute"></span>:
  <span id="second"></span>
</div>

接下来，我们为倒计时部分加上相应的CSS样式，使其在页面上能够美观地呈现出来，例如：

#countdown {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

#countdown span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #333;
  color: #fff;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}

步骤二：获取当前时间和目标时间

接下来，我们需要使用JavaScript获取当前时间和目标时间，以便计算倒计时的时间差。通常可以使用Date对象获取当前时间，同时在HTML中使用自定义属性来指定目标时间，例如：

<div id="countdown" data-target="2022-01-01 00:00:00">
  <span id="hour"></span>:
  <span id="minute"></span>:
  <span id="second"></span>
</div>

const now = new Date();
const target = new Date(document.getElementById('countdown').dataset.target);

步骤三：计算时间差和更新倒计时

接下来，我们需要计算出当前时间和目标时间的时间差，并使用定时器来每秒更新一次倒计时。我们可以使用以下代码来计算时间差，并更新HTML中的时、分、秒。

function updateCountdown() {
  const now = new Date();
  const target = new Date(document.getElementById('countdown').dataset.target);

  const diff = target - now;

  // 时间差转成时分秒
  const hours = Math.floor(diff / 1000 / 60 / 60);
  const minutes = Math.floor(diff / 1000 / 60) % 60;
  const seconds = Math.floor(diff / 1000) % 60;

  // 更新HTML中的时、分、秒
  document.getElementById('hour').textContent = String(hours).padStart(2, '0');
  document.getElementById('minute').textContent = String(minutes).padStart(2, '0');
  document.getElementById('second').textContent = String(seconds).padStart(2, '0');
}

// 每秒更新一次倒计时
setInterval(updateCountdown, 1000);

示例

下面是两个示例来展示该效果的具体实现过程。

示例一：普通的倒计时效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS动态倒计时效果</title>
    <style>
      #countdown {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
      }

      #countdown span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #333;
        color: #fff;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="countdown" data-target="2022-01-01 00:00:00">
      <span id="hour"></span>:
      <span id="minute"></span>:
      <span id="second"></span>
    </div>
    <script>
      function updateCountdown() {
        const now = new Date();
        const target = new Date(document.getElementById('countdown').dataset.target);

        const diff = target - now;

        // 时间差转成时分秒
        const hours = Math.floor(diff / 1000 / 60 / 60);
        const minutes = Math.floor(diff / 1000 / 60) % 60;
        const seconds = Math.floor(diff / 1000) % 60;

        // 更新HTML中的时、分、秒
        document.getElementById('hour').textContent = String(hours).padStart(2, '0');
        document.getElementById('minute').textContent = String(minutes).padStart(2, '0');
        document.getElementById('second').textContent = String(seconds).padStart(2, '0');
      }

      // 每秒更新一次倒计时
      setInterval(updateCountdown, 1000);
    </script>
  </body>
</html>

示例二：带有过期提示的倒计时效果

在某些场合下，我们可能需要在倒计时到达时停止倒计时，同时给出一个过期提示。可以在updateCountdown函数中使用以下代码，来实现这一效果。

function updateCountdown() {
  const now = new Date();
  const target = new Date(document.getElementById('countdown').dataset.target);

  const diff = target - now;

  if (diff < 0) {
    // 倒计时结束，停止定时器
    clearInterval(countdownInterval);

    // 显示过期提示
    document.getElementById('countdown').textContent = '倒计时已结束！';
  } else {
    // 时间差转成时分秒
    const hours = Math.floor(diff / 1000 / 60 / 60);
    const minutes = Math.floor(diff / 1000 / 60) % 60;
    const seconds = Math.floor(diff / 1000) % 60;

    // 更新HTML中的时、分、秒
    document.getElementById('hour').textContent = String(hours).padStart(2, '0');
    document.getElementById('minute').textContent = String(minutes).padStart(2, '0');
    document.getElementById('second').textContent = String(seconds).padStart(2, '0');
  }
}

// 每秒更新一次倒计时
const countdownInterval = setInterval(updateCountdown, 1000);

在HTML中使用与示例一相同的结构，这里不再赘述。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS动态显示倒计时效果 - Python技术站