当前位置：首页 > JavaScript

js实现54321倒数

2026-02-03 05:09:49JavaScript

实现54321倒数的JavaScript代码

使用setInterval和clearInterval实现简单的倒计时功能：

let count = 5;
const countdownElement = document.getElementById('countdown');

const timer = setInterval(() => {
  countdownElement.textContent = count;
  count--;

  if (count < 0) {
    clearInterval(timer);
    countdownElement.textContent = '倒计时结束！';
  }
}, 1000);

添加HTML结构

需要配合以下HTML结构使用：

js实现54321倒数

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

使用递归setTimeout的替代方案

另一种实现方式可以避免setInterval的潜在问题：

let count = 5;
const countdownElement = document.getElementById('countdown');

function runCountdown() {
  countdownElement.textContent = count;
  count--;

  if (count >= 0) {
    setTimeout(runCountdown, 1000);
  } else {
    countdownElement.textContent = '完成！';
  }
}

runCountdown();

添加动画效果的版本

为倒计时添加简单的CSS动画效果：

js实现54321倒数

let count = 5;
const countdownElement = document.getElementById('countdown');
countdownElement.classList.add('animate');

function updateCountdown() {
  countdownElement.textContent = count;
  count--;

  if (count >= 0) {
    setTimeout(updateCountdown, 1000);
  } else {
    countdownElement.textContent = '发射！';
    countdownElement.classList.remove('animate');
  }
}

updateCountdown();

对应的CSS样式：

.animate {
  transition: transform 0.5s;
  transform: scale(1.2);
}

使用Promise的异步实现

现代JavaScript可以使用async/await实现：

async function startCountdown() {
  const element = document.getElementById('countdown');

  for (let i = 5; i >= 0; i--) {
    element.textContent = i;
    await new Promise(resolve => setTimeout(resolve, 1000));
  }

  element.textContent = '倒计时完成';
}

startCountdown();

这些实现方式都可以在浏览器环境中运行，根据具体需求选择合适的方法。所有版本都实现了从5开始倒数到0的基本功能，部分版本添加了额外的效果和现代语法支持。