Question

我对CSS有很多了解，但我是Javascript的新手，所以我不知道如何完成以下任务，需要你的帮助。

我想在屏幕底部显示一个固定的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);
});

您还应该添加“display：none;”属于你的div css类。

Answer 2

你的CSS也需要小的chnage，

.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 个答案: