我在我的页面上添加了一个 HTML 按钮，如果你点击它，它会隐藏按钮，但我希​​望按钮隐藏 11 小时

Question

<button type="button"
style="background-color:skyblue; border-color:blue; color:white"
className="bn49"
onClick = "this.style.visibility= 'hidden'; window.open('https://frankvanasch.com/elementor-158/','_blank')"
>go
</button>

Answer 1

如果您的用户知道自己在做什么，那么使用 HTML 和 JavaScript 实现您的目标可能是不可能的。

如果您想隐藏按钮 11 小时，我会使用 localStorage 或 cookie 来存储其状态，并选择是否要显示按钮。 并且反转逻辑，就像按钮必须默认隐藏，并且仅在没有进行交互或最后一次交互超过 11 小时前才显示。

这样的东西，当然这个sn-p不能在这里运行，因为SO localStorage的限制。

$(".bn49").on("click", function(evt) {
  let tgt = evt.target;
  $(tgt).hide();
  localStorage.setItem("bn49", new Date().toISOString());
  window.open('https://frankvanasch.com/elementor-158/', '_blank');
});

$(function() {
  let btnTime = localStorage.getItem("bn49");
  if (btnTime) {
    // there is a time stored, we'll check it
    let t = new Date();
    t.setHours(t.getHours() - 11);
    if (new Date(btnTime).getTime() > t.getTime()) {
      // 11 hours have passed, show the button
      $(".bn49").show();
    }
  } else {
    // there isn't a time stored, show the button
    $(".bn49").show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" style="background-color:skyblue; border-color:blue; color:white; visibility: hidden;" className="bn49">go</button>