页面加载特定时间后如何显示Div？
[英]How to show Div after a Specific time of page load?
问题描述
I have pretty much knowledge of CSS but I am totally new in Javascript, so I don't know how to do the following task, need your help. 
我非常了解CSS，但是我是Java的新手，所以我不知道如何执行以下任务，需要您的帮助。
I want to show a fixed div in the bottom of a screen but it should only appear after a specific period of time, suppose 10 seconds, how to do that with the following code. 我想在屏幕底部显示一个固定的div，但是它应该仅在特定时间段（假设10秒）之后出现，如何使用以下代码进行显示。
CSS 的CSS
.bottomdiv
{
position: absolute;
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
POSITION: fixed;
bottom: 0;
}
HTML 的HTML
<div class="bottomdiv">
<iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
</div>
Thanks. 谢谢。
4 个解决方案
解决方案1
5 2016-11-16 12:20:42
There is the jQuery tag in your question, so I bet you're using jQuery. 您的问题中包含jQuery标记，所以我敢打赌您正在使用jQuery。 You can do this: 你可以这样做：
// 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);
});
You should also add the "display: none;" 您还应该添加“显示：无；” property to your div css class. div CSS类的属性。
解决方案2
3 2016-11-16 12:25:01
You need small chnage in your css as well, 您还需要在CSS中添加小字体，
.bottomdiv{
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
position: fixed;
bottom: 0;
display: none
}
And as my other fiend suggest, you need to show the div 10 sec through js, 正如我的另一个恶魔所建议的那样，您需要通过js显示div 10秒，
$(document).ready(function(){
setTimeout(function(){
$(".bottomdiv").show();
}, 10000);
});
解决方案3
2 2016-11-16 12:33:19
Example without using Jquery, just pure Javascript: 不使用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>
解决方案4
2 已采纳 2016-11-16 12:33:28
Use Timeout with JS. 在JS中使用超时。 I set it as 5 sec. 我将其设置为5秒。 Also the working fiddle. 也是工作的小提琴。 It's a good practice to add/remove class for these kind of activities 在此类活动中添加/删除课程是一个好习惯
https://jsfiddle.net/ut3q5z1k/ https://jsfiddle.net/ut3q5z1k/
HTML 的HTML
<div class="bottomdiv hide" id="footer">
<iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
</div>
CSS 的CSS
.bottomdiv
{
position: absolute;
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
POSITION: fixed;
bottom: 0;
}
.hide {
display: none;
}
JS JS
setTimeout(function(){
document.getElementById('footer').classList.remove('hide');
}, 5000);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.