页面加载特定时间后如何显示Div? [英] How to show Div after a Specific time of page load?

问题描述

我非常了解CSS，但是我是Java语言的新手，所以我不知道如何完成以下任务，需要您的帮助.

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.

我想在屏幕底部显示一个固定的div，但是它应该只在特定的时间段(假设10秒)之后显示，该代码如何使用以下代码显示.

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.

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>

谢谢.

推荐答案

对JS使用超时.我将其设置为5秒.也是工作的小提琴.在此类活动中添加/删除课程是一种很好的做法
https://jsfiddle.net/ut3q5z1k/
HTML

Use Timeout with JS. I set it as 5 sec. Also the working fiddle. It's a good practice to add/remove class for these kind of activities
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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！