如何使用JavaScript和CSS实现3.2.1数字倒计时？附部分代码

我帮你把这个倒计时功能补全啦！先看看你现有代码里的小问题：比如one函数里的className没写完，而且每次创建新的<p>元素后，旧的数字不会消失，导致多个数字重叠。下面是包含HTML、CSS和优化后JS的完整实现方案，还加了点动画效果让倒计时更有质感：

完整代码实现 #

HTML 结构 #

首先需要一个容器承载倒计时内容，直接用你已经定义的#readyGo即可：

<div id="readyGo"></div>

CSS 样式 #

给倒计时数字和结束提示添加样式，再加上动画效果增强视觉体验：

#readyGo {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.nums {
  font-size: 8rem;
  font-weight: bold;
  color: #333;
  opacity: 0;
  animation: fadeInOut 1s ease-in-out;
}

/* 数字淡入淡出+缩放动画 */
@keyframes fadeInOut {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.8); }
}

.go {
  font-size: 6rem;
  color: #2ecc71;
  animation: popIn 0.5s ease-out forwards;
}

/* 结束提示弹出动画 */
@keyframes popIn {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

优化后的 JavaScript 代码 #

修复原有代码的问题，简化逻辑并添加倒计时结束的提示：

const readyGo = document.getElementById("readyGo");

// 统一管理倒计时内容，方便后续修改
const countdownItems = ['three', 'two', 'one', 'Go!'];

// 遍历倒计时序列，自动设置定时器
countdownItems.forEach((item, index) => {
  setTimeout(() => {
    // 清空容器，避免旧元素和新元素重叠
    readyGo.innerHTML = '';
    
    const content = document.createElement('p');
    content.textContent = item;
    // 根据内容分配对应样式类
    content.className = item === 'Go!' ? 'go' : `${item} nums`;
    
    readyGo.appendChild(content);
  }, (index + 1) * 1000); // 每个步骤间隔1秒
});

代码说明 #

• 用数组countdownItems统一管理倒计时内容，后续要修改文字或添加步骤时直接改数组就行；
• 用forEach遍历序列，自动生成定时器，避免重复写多个setTimeout和独立函数；
• 每次显示新内容前清空容器，彻底解决多个数字重叠的问题；
• 给结束提示“Go!”单独设置样式和动画，和倒计时数字形成区分，更醒目；
• CSS动画让整个倒计时过程更生动，不会显得生硬。

运行这段代码后，就会依次显示three→two→one→Go!，每个元素都会有对应的动画效果，完美实现你想要的倒计时功能~

内容的提问来源于stack exchange，提问作者Jun Jung