html中的倒计时(1) - 芒果文档

📌 相关文章

📜 html中的倒计时(1)

📅 最后修改于: 2023-12-03 15:15:44.415000 🧑 作者: Mango

HTML中的倒计时

在网页中，我们经常需要使用倒计时来提醒用户某项任务的截止时间或者倒计时活动的开始时间。在HTML中实现倒计时，我们可以使用JavaScript来实现。

实现方式

创建HTML标记

我们可以给倒计时设置一个ID，然后在HTML中创建一个<div>标签来显示倒计时的结果。

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

创建JavaScript代码

const countdownDiv = document.querySelector("#countdown");
let deadline = new Date("2021/12/31");

setInterval(() => {
  let now = new Date().getTime();
  let distance = deadline.getTime() - now;

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

  countdownDiv.innerHTML = `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`;

  if (distance < 0) {
    clearInterval();
    countdownDiv.innerHTML = "EXPIRED";
  }
}, 1000);

上述代码中，我们首先获取HTML中的div元素，然后给倒计时设置一个截止时间（deadline），这里我们设置为2021年12月31日。然后我们使用setInterval函数来每秒更新一次倒计时的时间，并且在页面中更新倒计时的值。当倒计时结束后，我们将清除setInterval函数，然后将倒计时的页面值设置为”EXPIRED“。

示例程序

<!DOCTYPE html>
<html>
  <head>
    <title>倒计时</title>
  </head>
  <body>
    <div id="countdown"></div>
    <script>
      const countdownDiv = document.querySelector("#countdown");
      let deadline = new Date("2021/12/31");

      setInterval(() => {
        let now = new Date().getTime();
        let distance = deadline.getTime() - now;

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

        countdownDiv.innerHTML = `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`;

        if (distance < 0) {
          clearInterval();
          countdownDiv.innerHTML = "EXPIRED";
        }
      }, 1000);
    </script>
  </body>
</html>

以上是一个简单的例子，您可以根据自己的需要调整JavaScript代码来实现不同类型的倒计时。