我怎么做<div>标签在 JS 20 秒后消失？</div><div id="text_translate"><p> 我正在为我的公司构建一个项目，我想知道<em>如何在 20 秒后使 div 消失？</em> 因为我正在构建一个带有position: -webkit-sticky; 和</p><pre>&lt;style&gt;.sticky { position: -webkit-sticky; position: sticky; }.areaWarning { width: 100%; height: 102px; background: lightgreen; display: inline-block; } &lt;/style&gt; &lt;div class="sticky"&gt; &lt;div class="areaWarning"&gt; &lt;h1&gt; This site is currently still being built &lt;/h1&gt; &lt;p&gt; We are still working on this site, sorry&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> 我只想知道如何使用 JavaScript 为该警告设置超时？</p><p> 谢谢，环形游戏</p></div>

Question

我正在为我的公司构建一个项目，我想知道如何在 20 秒后使 div 消失？ 因为我正在构建一个带有position: -webkit-sticky; 和

<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.areaWarning {
width: 100%;
height: 102px;
background: lightgreen;
display: inline-block;
}
</style>
<div class="sticky">
<div class="areaWarning">
<h1> This site is currently still being built </h1>
<p> We are still working on this site, sorry</p>
</div>
</div>

我只想知道如何使用 JavaScript 为该警告设置超时？

谢谢，环形游戏

Answer 1

您可以使用 setTimeout 在 20 秒后隐藏元素。

 const areaWarning = document.getElementById("areaWarning") setTimeout(hideElement, 20000) function hideElement() { areaWarning.style.display = "none" }

 .sticky { position: -webkit-sticky; position: sticky; }.areaWarning { width: 100%; height: 102px; background: lightgreen; display: inline-block; }

 <div class="sticky"> <div id="areaWarning"> <h1> This site is currently still being built </h1> <p> We are still working on this site, sorry</p> </div> </div>

Answer 2

在没有 ES6 的 vanilla JS 中，类似：

<script>   
    window.addEventListener('load', function() {
        var warning = document.querySelector(".sticky");
        setTimeout(function() {
            warning.style.visibility = "hidden";
      }, 20000);
    })
</script>