当前位置：首页 > JavaScript

js 实现倒数

2026-02-01 15:01:34JavaScript

实现 JavaScript 倒数功能

使用 `setInterval` 实现倒数计时器

let count = 10; // 设置初始倒数值
const timer = setInterval(() => {
  console.log(count);
  count--;
  if (count < 0) {
    clearInterval(timer);
    console.log('倒数结束');
  }
}, 1000); // 每秒执行一次

使用 `setTimeout` 递归实现倒数

function countdown(seconds) {
  console.log(seconds);
  if (seconds > 0) {
    setTimeout(() => countdown(seconds - 1), 1000);
  } else {
    console.log('倒数结束');
  }
}
countdown(10); // 从10开始倒数

带有暂停和继续功能的倒数计时器

let count = 10;
let timer;
let isPaused = false;

function startCountdown() {
  timer = setInterval(() => {
    if (!isPaused) {
      console.log(count);
      count--;
      if (count < 0) {
        clearInterval(timer);
        console.log('倒数结束');
      }
    }
  }, 1000);
}

function togglePause() {
  isPaused = !isPaused;
}

startCountdown();
// 调用 togglePause() 可以暂停或继续倒数

使用 Promise 和 async/await 实现倒数

async function asyncCountdown(seconds) {
  for (let i = seconds; i >= 0; i--) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(i);
  }
  console.log('倒数结束');
}
asyncCountdown(10);

显示在页面上的倒数计时器

HTML:

<div id="countdown">10</div>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>

JavaScript:

let count = 10;
let timer;
let isRunning = false;

document.getElementById('startBtn').addEventListener('click', () => {
  if (!isRunning) {
    isRunning = true;
    timer = setInterval(() => {
      count--;
      document.getElementById('countdown').textContent = count;
      if (count <= 0) {
        clearInterval(timer);
        isRunning = false;
      }
    }, 1000);
  }
});

document.getElementById('pauseBtn').addEventListener('click', () => {
  clearInterval(timer);
  isRunning = false;
});

这些方法提供了从简单到复杂的各种倒数实现方式，可以根据具体需求选择合适的方案。

js 实现倒数