如何实现点击定时弹出的div后将其隐藏？

嘿，我明白你的问题啦！你已经成功让div在30秒后弹出来，但就是没法让它点击消失对吧？其实问题很简单——你的代码只处理了显示div的逻辑，完全没给这个div绑定点击消失的事件，所以浏览器根本不知道点击它要做什么～

我给你两种简单的解决方案，选哪种都可以：

方案1：在JS里提前绑定点击事件（推荐） #

这种方式更灵活，而且只会绑定一次事件，不会有重复绑定的问题：

window.onload = function() {
  // 先拿到这个div元素
  const acceptBox = document.getElementById("acceptbox3");
  
  // 提前绑定点击消失的事件，哪怕div一开始是隐藏的也没关系
  acceptBox.addEventListener('click', function() {
    this.style.display = 'none';
  });
  
  // 30秒后显示div
  setTimeout(appeardiv, 30000);
}

function appeardiv() {
  document.getElementById("acceptbox3").style.display = "block";
}

方案2：直接在HTML里加点击属性（更简单） #

如果你的需求很简单，不想改JS的话，直接给div加onclick属性就行：

<div id="acceptbox3" class="accept_square3" onclick="this.style.display='none'"></div>

这样div显示后，点击它就会立刻隐藏啦！

为什么原来的代码不行？ #

你之前的代码只调用了style.display = "block"让div显示，但没有给它添加任何点击触发的行为。浏览器不会自动知道点击div要做什么，必须明确告诉它：“当这个div被点击时，把它的display改成none”。

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