如何用JS实现无鼠标移动触发的类增删及网页屏保效果？

核心问题解决思路 #

• 检测无鼠标移动：监听mousemove事件，每次鼠标移动时重置定时器——先清除当前定时器，再重新启动5秒倒计时。
• 点击隐藏元素：在点击事件中，除了清除定时器，还要切换元素的类，把showMe移除、添加hideMe。
• 修正类名错误：classList.add/remove的参数不能带.，比如.showMe要改成showMe。

完整修正代码 #

// 提前获取元素，避免重复查询DOM
const checkOnMeCard = document.querySelector('.timerCard');

// 定义定时器变量，方便后续清除和重置
let bombTimer;

function startTimer() {
  // 先清除之前的定时器，避免叠加
  clearTimeout(bombTimer);
  // 重新设置5秒后触发显示逻辑
  bombTimer = setTimeout(() => {
    checkOnMeCard.classList.remove('hideMe');
    checkOnMeCard.classList.add('showMe');
    console.log('Hello World!');
  }, 5000);
}

// 初始化启动定时器
startTimer();

// 监听鼠标移动，每次移动都重置定时器
window.addEventListener('mousemove', startTimer);

// 监听点击事件：隐藏元素+重置定时器
window.addEventListener('click', () => {
  console.log('Goodbye Cruel World');
  // 清除当前定时器
  clearTimeout(bombTimer);
  // 切换类实现隐藏
  checkOnMeCard.classList.remove('showMe');
  checkOnMeCard.classList.add('hideMe');
  // 隐藏后重新启动定时器，等待下一次无操作触发
  startTimer();
});

代码说明 #

1. 元素提前获取：把checkOnMeCard放在全局，避免每次操作都查询DOM，提升性能。
2. 定时器重置逻辑：startTimer函数负责清除旧定时器、创建新定时器，鼠标移动和初始化时都会调用它，确保只要有鼠标操作就重新开始倒计时。
3. 点击事件处理：点击时先清除定时器，再切换类隐藏元素，最后重新启动定时器，保证隐藏后仍能继续监听无操作状态。
4. 类名修正：移除了类名前的.，因为classList的方法只需要类名本身，不需要选择器符号。

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