如何在特定页面加载时间后显示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>

感谢。

[呼叫与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);

答

在你的问题中有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类。

答

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

答

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

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

相关推荐