Question

我正在尝试创建一个div，它可以在页面加载10秒后隐藏，可以用PHP或JavaScript完成。

代码示例：

<html>
<head></head>
<body>
<div class="LOADING" id="LOADING" name="LOADING"></div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU"></div>
</body>
</html>

Answer 1

是的。

<html>
<head></head>
<body>
<div class="LOADING" id="LOADING" name="LOADING">LOADING</div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU">HOME_MENU</div>
<script>
    setTimeout(function(){
        document.getElementById('LOADING').style.display = 'none';
    }, 10000); // 10000ms = 10s
</script>
</body>
</html>

Answer 2

这是通过Javascript完成的。您可以添加一个脚本，该脚本设置超时以在几秒钟后隐藏div。

<html>
<head></head>
<body>
<div class="LOADING" id="LOADING" name="LOADING"></div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU"></div>


<script>
// Get the element by id using javascript
var divElement = document.getElementById('LOADING');

  // after 10 seconds (10 000 milliseconds), execute the function to hide it
  setTimeOut(function () {
     // hide the divElement. There are a couple of ways. In this case, let's
     // just give it a display of none
     divElement.style.display = 'none'
  }, 10000);

</script>

</body>
</html>

Answer 3

我会在主体上执行onload操作-它会自动触发setTimeout并在加载页面时开始。

function hideLoadingDiv() {
  setTimeout(function(){
    document.getElementById('LOADING').classList.add('hidden');
  },10000)
}

.hidden {
  display: none;
}

<html>
<head></head>
<body onload="hideLoadingDiv()">
<div class="LOADING" id="LOADING" name="LOADING">Loading</div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU">Menu</div>
</body>
</html>

如何显示div 10秒并在之后隐藏它？

3 个答案: