关闭 div 内容 1 小时

Question

我目前正在为一个宠物协会制作博客，并且我想在单击关闭按钮后将我的 div 内容隐藏 1 小时。 我在 Stack Overflow 上发现了类似的东西，但没有帮助。

HTML

<div id="shownOnlyOnceHour">
  <div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">x</button>
    <p>Title :</p>
    <div id="contentlist1"">
      <div class="columnsl"></div>
    </div>
  </div>
</div>

Answer 1

您可以将单击close按钮的时间存储在localStorage中：

document.querySelector(".close").addEventListener("click", function() {
  localStorage.setItem("lastTime", new Date().getTime());
  
  // Your code to hide the div
});

然后您可以检查localStorage中是否有任何名为lastTime的字段，并将该值与当前时间进行比较：

var currentTime = new Date().getTime();

var lastTime = localStorage.getItem("lastTime");

if (lastTime !== undefined && ((currentTime - lastTime) * 1000 * 60 * 60) >= 1) {
  localStorage.removeItem("lastTime");
  //Your code to show the div
}

如果您需要更多说明，请告诉我。

Answer 2

我认为出了点问题，或者我不明白您的意思。我尝试将我的 class="d-none" 添加到 shownOnlyOnceADay 但不起作用。

var currentTime = new Date().getTime();

var lastTime = localStorage.getItem("lastTime");

if (lastTime !== undefined && ((currentTime - lastTime) * 1000 * 60 * 60) >= 1) {
  localStorage.removeItem("lastTime");
$("#shownOnlyOnceADay").removeClass('d-none');
}

<div id="shownOnlyOnceADay" class="d-none">