当前位置：首页 > JavaScript

js实现倒进时

2026-02-02 16:17:11JavaScript

实现倒计时的方法

使用 setInterval 和 clearInterval

创建一个函数，使用 setInterval 每隔一秒更新倒计时显示，当倒计时结束时使用 clearInterval 停止计时器。

function countdown(seconds) {
  const timer = setInterval(() => {
    console.log(seconds);
    seconds--;
    if (seconds < 0) {
      clearInterval(timer);
      console.log('倒计时结束');
    }
  }, 1000);
}
countdown(10);

使用 setTimeout 递归调用

通过递归调用 setTimeout 实现倒计时，避免 setInterval 可能带来的时间误差问题。

js实现倒进时

function countdown(seconds) {
  console.log(seconds);
  seconds--;
  if (seconds >= 0) {
    setTimeout(() => countdown(seconds), 1000);
  } else {
    console.log('倒计时结束');
  }
}
countdown(10);

使用 Date 对象计算剩余时间

利用 Date 对象获取精确的时间差，适用于需要高精度倒计时的场景。

js实现倒进时

function countdown(endTime) {
  const interval = setInterval(() => {
    const now = new Date().getTime();
    const distance = endTime - now;
    const seconds = Math.floor(distance / 1000);
    console.log(seconds);
    if (distance < 0) {
      clearInterval(interval);
      console.log('倒计时结束');
    }
  }, 1000);
}
const endTime = new Date().getTime() + 10000; // 10秒后
countdown(endTime);

在 HTML 页面中显示倒计时

将倒计时显示在网页上，动态更新 DOM 元素。

<div id="countdown"></div>
<script>
  function countdown(seconds) {
    const element = document.getElementById('countdown');
    const timer = setInterval(() => {
      element.innerHTML = seconds;
      seconds--;
      if (seconds < 0) {
        clearInterval(timer);
        element.innerHTML = '倒计时结束';
      }
    }, 1000);
  }
  countdown(10);
</script>

使用 async/await 实现倒计时

通过 async/await 结合 setTimeout 实现更清晰的异步倒计时逻辑。

async function countdown(seconds) {
  while (seconds >= 0) {
    console.log(seconds);
    await new Promise(resolve => setTimeout(resolve, 1000));
    seconds--;
  }
  console.log('倒计时结束');
}
countdown(10);

以上方法可以根据具体需求选择使用，适用于不同的倒计时场景。