Question

我是JS的新手。页面加载时，以下JS代码不起作用。

function alert10() {

  var today = new Date().getMinutes();
  if (today > 10) {

    window.onload = function() {
      document.getElementById('timer10').style.display = 'none';
    };

  }
}

我正在如下调用alert10（）：

<header onload="alert10()">

以下是我要隐藏的元素：

<h5 id="timer10"  style=" position:absolute;top: 1px;left: 151px;"></h5>

Answer 1

使用window.onload尝试以下操作：

<html>

<body>
  <h5 id="timer10" style=" position:absolute;top: 1px;left: 151px;">Something</h5>
  <script>
    window.onload = () => {
      var today = new Date().getMinutes();
      if (today > 10) {
        document.getElementById('timer10').style.display = 'none';
      } else {
        alert('minutes is less than 10')
      }
    }
  </script>
</body>

</html>

Answer 2

执行标头onload函数时，窗口onload可能已经触发。如果将窗口侦听器从功能中移出，则计时器将按预期方式隐藏（假设从上一小时开始已经过去了10分钟）。如果您使用例如点击监听器或其他任何后续触发器。

window.onload = function() {
  document.getElementById('timer11').style.display = 'none';
};

function alert10() {
  var today = new Date().getMinutes();
  if (today > 10) {
      document.getElementById('timer10').style.display = 'none';
  } else {
    console.log("10 minutes haven't past since last hour started")
  }
}

我添加了第二个计时器以同时显示两者

<header onload="alert10()" onclick="alert10()">
  <h5 id="timer10"  style=" position:absolute;top: 1px;left: 151px;">timer10</h5>
  <h5 id="timer11"  style=" position:absolute;top: 1px;left: 251px;">timer11</h5>
</header>

和一些CSS来使可点击区域更明显

header {
    position: relative;
    width: 100%;
    height: 20vh;
    background-color: mediumseagreen;
}

元素不会在JavaScript中的页面加载时隐藏

2 个答案: