显示隐藏 div 有时间限制 JS 而不是 Jquery

Question

我的网站头部隐藏了以下 div。

<div id="esperaMensaje" class="mensajeEspera" style="display:none;">
<p>Espere un momento...</p>
</div>

当用户点击带有 class“继续”的按钮时，div 出现，然后在 8 秒后隐藏。

我尝试使用 jquery 这将是最简单的但是它没有用，因为我在 prestashop 中设置它并且它有点麻烦，因为它使用的是旧版本的 jquery 所以我想让它与纯 js 一起工作。

Answer 1

在“点击”按钮上添加事件侦听器，将 <div> 设置为其默认显示属性，然后在 8 秒后通过 [= 将其设置回 display: none 14=].

document.querySelector(".continue").addEventListener("click", () => {
  const div = document.querySelector("#esperaMensaje");
  div.style.display = "";
  setTimeout(() => div.style.display = "none", 8000); // 8000ms = 8s
});

<button class="continue">continue button</button>
<div id="esperaMensaje" class="mensajeEspera" style="display:none;">
  <p>Espere un momento...</p>
</div>

显示隐藏 div 有时间限制 JS 而不是 Jquery

Show hide div with a time limit JS not Jquery

html

javascript

prestashop