如何用JavaScript定时切换类？点击关闭后定时恢复.pupuppro类

问题1：如何使用JavaScript实现每隔特定时间切换DOM元素的类？ #

可以用setInterval定时器实现，它会按指定时间间隔重复执行回调函数，在回调里切换目标元素的类即可。下面是完整示例：

HTML #

<div class="target-element">我会定时切换样式</div>

CSS #

.target-element {
  padding: 20px;
  background: #eee;
  transition: all 0.3s;
}

.target-element.highlight {
  background: #ffd700;
  color: #333;
}

JavaScript #

// 获取目标元素
const target = document.querySelector('.target-element');
// 设置定时器，每隔2秒切换一次类
const intervalId = setInterval(() => {
  target.classList.toggle('highlight');
}, 2000);

// 如需停止定时器，调用下面的代码
// clearInterval(intervalId);

说明：setInterval的第二个参数是间隔时间（单位：毫秒），这里设置2000就是每2秒切换一次。不用的时候一定要用clearInterval清除定时器，防止内存泄漏。

问题2：点击关闭按钮后定时恢复元素类 #

针对你现有的代码，修改toggle函数即可实现：点击关闭按钮切换到.pupuppro.active后，过指定时间自动移除active类，恢复初始状态。同时加入定时器防抖，避免重复点击导致多个定时器冲突。

修改后的完整代码 #

HTML

<div class="pupuppro">
  <h1 class="text">good morning</h1>
  <i id="proo" onclick="toggle();">close</i>
</div>

CSS

.pupuppro {
  background: #0000007a;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border: 0;
  z-index: 9999;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
}

.pupuppro.active {
  visibility: hidden;
}

#proo {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 25px;
  color: red;
  width: 50px;
  height: 50px;
  font-size: xx-large;
}

JavaScript

// 保存定时器ID，用于防抖
let timeoutId = null;

function toggle() {
  const popup = document.querySelector(".pupuppro");
  popup.classList.toggle("active");
  
  // 如果切换后是隐藏状态（有active类），设置定时恢复
  if (popup.classList.contains('active')) {
    // 先清除之前的定时器，避免重复触发
    if (timeoutId) clearTimeout(timeoutId);
    // 5秒后移除active类（可修改时间，单位毫秒）
    timeoutId = setTimeout(() => {
      popup.classList.remove('active');
      timeoutId = null;
    }, 5000);
  } else {
    // 如果手动打开弹窗，清除之前的定时器
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = null;
  }
}

说明：

1. 用timeoutId变量保存定时器ID，每次点击先清除之前的定时器，避免多次点击导致多个定时任务冲突。
2. 当弹窗切换到隐藏状态（添加了active类），设置setTimeout，5秒后自动移除active类，弹窗恢复显示。
3. 如果用户手动再次打开弹窗，会清除之前的定时器，避免不必要的自动隐藏。

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