首页 > 解决方案 > 如何显示一个 div 10 秒然后隐藏它?

问题描述

我正在尝试创建一个将在页面加载 10 秒后隐藏的 div,是否可以在 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>

标签: javascripthtmlcss

解决方案


我会在正文上使用 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>


推荐阅读