javascript - 如何设置弹出窗口的超时时间？

Question

我创建了一个弹出窗口，当我单击按钮时会出现该弹出窗口，但要使其消失，我必须再次单击。有没有办法设置计时器并使其消失？

这是代码:

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

.popuptext {
  display: none;
}
.popuptext.show {
  display: block;
}

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

Answer 1

我建议您阅读函数setTimeout() on w3schools或mozilla dev ，这对于编程初学者来说都是两个很棒的网站。

您的问题可以像以下代码片段所示得到解决:

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");

  if(popup.classList.contains("show")) // Check if the popup is shown
     setTimeout(() => popup.classList.remove("show"), 10000) // If yes hide it after 10000 milliseconds
}