基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

实现倒计时的方式有很多种，下面我将详细讲解一种基于JavaScript代码实现简单易用的倒计时效果的攻略。

步骤一：HTML结构

首先，我们需要在HTML中构建出需要展示倒计时的元素，我们可以使用两个div元素，其中一个用来显示时分秒，另一个用来显示天数。

以下是示例代码：

<div id="countdown">
  <div id="countdown-days"></div>
  <div id="countdown-time"></div>
</div>

步骤二：CSS样式

接下来需要为倒计时元素设置样式，如宽度、高度、背景颜色、字体大小等。

以下是示例代码：

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #ccc;
  font-size: 24px;
  font-weight: bold;
}

#countdown-days {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #555;
  color: #fff;
}

#countdown-time {
  padding: 5px 10px;
  background-color: #444;
  color: #fff;
}

步骤三：JavaScript代码

接下来是最重要的部分，通过JavaScript代码实现倒计时效果。首先，我们需要获取倒计时结束的日期时间，然后计算出与当前时间的时间差，最后以天、时、分、秒的形式展示出来。

以下是示例代码：

//设置倒计时结束的日期时间
const countdownDate = new Date("2022-01-01 00:00:00").getTime();

//每秒更新一次倒计时
const interval = setInterval(() => {
  //获取当前时间
  const now = new Date().getTime();

  //计算与结束时间的时间差
  const diff = countdownDate - 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);

  //更新倒计时元素内容
  document.getElementById("countdown-days").innerHTML = `${days} 天`;
  document.getElementById("countdown-time").innerHTML = `${hours} 时 ${minutes} 分 ${seconds} 秒`;

  //倒计时结束时清除定时器
  if (diff <= 0) {
    clearInterval(interval);
  }
}, 1000);

步骤四：完整代码

以下是完整的HTML、CSS、JavaScript代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
      #countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        background-color: #ccc;
        font-size: 24px;
        font-weight: bold;
      }

      #countdown-days {
        margin-right: 10px;
        padding: 5px 10px;
        background-color: #555;
        color: #fff;
      }

      #countdown-time {
        padding: 5px 10px;
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="countdown">
      <div id="countdown-days"></div>
      <div id="countdown-time"></div>
    </div>

    <script>
      //设置倒计时结束的日期时间
      const countdownDate = new Date("2022-01-01 00:00:00").getTime();

      //每秒更新一次倒计时
      const interval = setInterval(() => {
        //获取当前时间
        const now = new Date().getTime();

        //计算与结束时间的时间差
        const diff = countdownDate - 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);

        //更新倒计时元素内容
        document.getElementById("countdown-days").innerHTML = `${days} 天`;
        document.getElementById("countdown-time").innerHTML = `${hours} 时 ${minutes} 分 ${seconds} 秒`;

        //倒计时结束时清除定时器
        if (diff <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    </script>
  </body>
</html>

示例说明

示例一：

假设我们现在需要倒计时到2022年1月1日，并将倒计时以天、时、分、秒的形式展示出来。我们可以在HTML中构建以下结构：

<div id="countdown">
  <div id="countdown-days"></div>
  <div id="countdown-time"></div>
</div>

然后在JavaScript代码中设置倒计时结束的日期时间，并以每秒更新一次的方式计算与当前时间的时间差，最后以天、时、分、秒的形式更新倒计时元素内容。

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
      #countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        background-color: #ccc;
        font-size: 24px;
        font-weight: bold;
      }

      #countdown-days {
        margin-right: 10px;
        padding: 5px 10px;
        background-color: #555;
        color: #fff;
      }

      #countdown-time {
        padding: 5px 10px;
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="countdown">
      <div id="countdown-days"></div>
      <div id="countdown-time"></div>
    </div>

    <script>
      //设置倒计时结束的日期时间
      const countdownDate = new Date("2022-01-01 00:00:00").getTime();

      //每秒更新一次倒计时
      const interval = setInterval(() => {
        //获取当前时间
        const now = new Date().getTime();

        //计算与结束时间的时间差
        const diff = countdownDate - 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);

        //更新倒计时元素内容
        document.getElementById("countdown-days").innerHTML = `${days} 天`;
        document.getElementById("countdown-time").innerHTML = `${hours} 时 ${minutes} 分 ${seconds} 秒`;

        //倒计时结束时清除定时器
        if (diff <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    </script>
  </body>
</html>

示例二：

假设我们现在需要倒计时10分钟，并将倒计时以秒的形式展示出来。我们可以在HTML中构建以下结构：

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

然后在JavaScript代码中设置倒计时结束的日期时间，并以每秒更新一次的方式计算与当前时间的时间差，最后以秒的形式更新倒计时元素内容。

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
      #countdown {
        height: 60px;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="countdown"></div>

    <script>
      //设置倒计时结束的日期时间
      const countdownDate = new Date().getTime() + 10 * 60 * 1000;

      //每秒更新一次倒计时
      const interval = setInterval(() => {
        //获取当前时间
        const now = new Date().getTime();

        //计算与结束时间的时间差
        const diff = countdownDate - now;

        //计算剩余秒数
        const seconds = Math.floor(diff / 1000);

        //更新倒计时元素内容
        document.getElementById("countdown").innerHTML = `${seconds} 秒`;

        //倒计时结束时清除定时器
        if (diff <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    </script>
  </body>
</html>

以上就是实现倒计时的完整攻略，总体来说，实现倒计时效果需要HTML、CSS、JavaScript三部分代码配合完成。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果 - Python技术站