如何在页面加载特定时间后显示 Div？答案

【问题标题】：How to show Div after a Specific time of page load?如何在页面加载特定时间后显示 Div？
【发布时间】：2016-11-16 21:25:01
【问题描述】：

我对 CSS 有相当多的了解，但我是 Javascript 的新手，所以我不知道如何完成以下任务，需要你的帮助。

我想在屏幕底部显示一个固定的 div，但它应该只在特定时间段后出现，假设 10 秒，如何使用以下代码做到这一点。

CSS

.bottomdiv
{
   position: absolute;
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   POSITION: fixed;
   bottom: 0;
}

HTML

 <div class="bottomdiv">
    <iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
 </div>

谢谢。

【问题讨论】：

Call function with setInterval in jQuery?的可能重复

标签： javascript jquery html css

【解决方案1】：

您的问题中有 jQuery 标签，所以我敢打赌您使用的是 jQuery。你可以这样做：

// Execute something when DOM is ready:
$(document).ready(function(){
   // Delay the action by 10000ms
   setTimeout(function(){
      // Display the div containing the class "bottomdiv"
      $(".bottomdiv").show();
   }, 10000);
});

您还应该添加“display: none;”属性到您的 div css 类。

【讨论】：

【解决方案2】：

在 JS 中使用超时。我将其设置为 5 秒。也是工作小提琴。为此类活动添加/删除类是一个好习惯
https://jsfiddle.net/ut3q5z1k/
HTML

  <div class="bottomdiv hide" id="footer">
   <iframe src="http://example.com" width="990" height="110"  scrolling="no"></iframe>
  </div>

CSS

.bottomdiv
{
 position: absolute;
 left:    0;
 right:   0;
 z-index : 100;
 filter : alpha(opacity=100);
 POSITION: fixed;
 bottom: 0;
}
.hide {
 display: none;
}

setTimeout(function(){
 document.getElementById('footer').classList.remove('hide');
}, 5000);

【讨论】：

【解决方案3】：

你的 css 也需要小改动，

.bottomdiv{
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   position: fixed;
   bottom: 0;
   display: none
}

正如我的另一个恶魔所建议的，您需要通过 js 显示 div 10 秒，

$(document).ready(function(){
   setTimeout(function(){
      $(".bottomdiv").show();
    }, 10000);
});

【讨论】：

【解决方案4】：

不使用 Jquery 的示例，仅使用纯 Javascript：

<!DOCTYPE html>
<html>
<body>
    <div id='prova' style='display:none'>Try it</div>

    <script>
        window.onload = function () {
            setTimeout(appeardiv,10000);
        }
        function appeardiv() {
            document.getElementById('prova').style.display= "block";
        }
    </script>

</body>
</html>

【讨论】：