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

我對CSS有很多知識，但是我在Javascript中完全是新手，所以我不知道如何完成以下任務，需要您的幫助。如何在特定頁面加載時間後顯示Div？

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

感謝。

來源

2016-11-16 Hamza Ahmad

[呼叫與setInterval函數的可能的複製在jQuery？]（http://stackoverflow.com/questions/5484205/call-function-with-setinterval-in-jquery） – Bharat

與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);

來源

2016-11-16 12:33:28

在你的問題中有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類。

來源

2016-11-16 12:20:42 Scalpweb

你需要小chnage在你的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); 
});

來源

2016-11-16 12:25:01 Samir

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

來源

2016-11-16 12:33:19 Sergi

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

回答

相關問題