頁面加載特定時間后如何顯示Div？

Question

我非常了解CSS，但是我是Java的新手，所以我不知道如何執行以下任務，需要您的幫助。

我想在屏幕底部顯示一個固定的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>

謝謝。

Answer 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);
});

您還應該添加“顯示：無；” div CSS類的屬性。

Answer 2

您還需要在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);
});

Answer 3

不使用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>

Answer 4

在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;
}

JS

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

頁面加載特定時間后如何顯示Div？

問題描述

4 個解決方案

解決方案1
5 2016-11-16 12:20:42

解決方案2
3 2016-11-16 12:25:01

解決方案3
2 2016-11-16 12:33:19

解決方案4
2 已采納 2016-11-16 12:33:28

頁面加載特定時間后如何顯示Div？

問題描述

4 個解決方案

解決方案1 5 2016-11-16 12:20:42

解決方案2 3 2016-11-16 12:25:01

解決方案3 2 2016-11-16 12:33:19

解決方案4 2 已采納 2016-11-16 12:33:28

解決方案1
5 2016-11-16 12:20:42

解決方案2
3 2016-11-16 12:25:01

解決方案3
2 2016-11-16 12:33:19

解決方案4
2 已采納 2016-11-16 12:33:28