求助：实现倒计时结束时显示指定Div并添加类的JavaScript功能

没问题，我来帮你搞定这个需求！核心就是在倒计时归0的逻辑分支里，加上操作DOM的代码就行，我给你整理了完整的示例：

完整代码示例 #

HTML部分 #

<!-- 两个默认隐藏的div -->
<div id="showDiv1" style="display: none;">第一个要显示的内容</div>
<div id="showDiv2" style="display: none;">第二个要显示的内容</div>
<!-- 需要添加指定类的div -->
<div id="addClassDiv">我是需要加类的目标div</div>
<!-- 倒计时显示区域 -->
<div id="countdownDisplay"></div>

JavaScript部分 #

// 这里模拟你的倒计时逻辑，你可以替换成自己的原有代码
let remainingTime = 5; // 倒计时总秒数
const countdownEl = document.getElementById('countdownDisplay');

const timer = setInterval(() => {
  remainingTime--;
  countdownEl.textContent = remainingTime;

  // 倒计时归0时触发操作
  if (remainingTime <= 0) {
    clearInterval(timer);
    countdownEl.textContent = 'ended'; // 你原有的显示"ended"逻辑

    // 1. 显示第一个隐藏的div
    document.getElementById('showDiv1').style.display = 'block';
    // 2. 显示第二个隐藏的div
    document.getElementById('showDiv2').style.display = 'block';
    // 3. 给目标div添加指定类（这里假设类名叫"custom-active"）
    document.getElementById('addClassDiv').classList.add('custom-active');
  }
}, 1000);

可选CSS（给添加的类加样式） #

.custom-active {
  background-color: #ffeaa7;
  padding: 8px;
  border-radius: 4px;
}

关键细节说明 #

• 我用getElementById获取元素，如果你页面里是用类名选择元素，换成document.querySelector('.your-class-name')就行
• 如果你的div需要用flex/inline-block等其他显示方式，把style.display = 'block'换成对应的值即可
• classList.add()是添加类的标准方法，要是后续需要移除类可以用classList.remove()，切换类状态用classList.toggle()

你只需要把这段DOM操作逻辑整合到自己现有的倒计时代码里，确保元素选择器和页面实际的一致就可以正常运行啦！

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