广告框自动关闭

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告框自动关闭</title>
<style>
.ad {
width: 400px;
height: 200px;
position: fixed;
top: 100px;
left: 400px;
background-color: blue;
border: 2px solid black;
}
</style>

    <script>
            
        window.onload = function() {
            var ad = document.getElementById("ad");
            var num = document.getElementById("num");
            var count = 5;
            var timer = setInterval(function() {
                count--;
                if(count == 0) {
                    ad.style.display = "none";
                    clearInterval(timer);
                }
                num.innerHTML = count;
            }, 1000)
        }
    </script>
    
    
</head>
<body>
    <div id="ad" class="ad">我是广告框<span id="num">5</span>s后消失</div>
</body>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,854评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,110评论 1 10
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,909评论 0 1
  • 三、闭包和高阶函数 3.1 闭包 3.1.1 变量的作用域 所谓变量的作用域,就是变量的有效范围。通过作用域的划分...
    梁同学de自言自语阅读 1,495评论 0 6
  • 影响力是以一种别人所乐于接受的方式,改变他人的思想和行动的能力。 这句话里,有四个字特别关键,那就是“乐于接受。”...
    一缕阳光v阅读 370评论 0 1