使用JS定时弹出广告

使用js实现定时广告弹出

我们可以使用js来实现广告的定时弹出与消失，在介绍思路前，先学习一个css样式：display,  display:block,以块级的元素方式显示; display:none,不显示元素，这其实就是广告的弹出与隐藏的原理。现在来简单介绍一下思路。

第一步：找到要显示和隐藏的标签，添加id方便使用javascript时能很快找到该标签，例如：

<div id="adDiv" style="width:100%;display:none;">
                <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%">
</div>

第二步：分析事件类型，据分析该事件应为onload事件

第三步：编写函数

            //使用匿名函数加载事件
            window.onload = function(){
                                // 设置定时：

                time = window.setInterval("show()",5000);
                            
            }

           // 显示广告的方法
            function show(){
                // 获得广告的div元素:
                var adDiv = document.getElementById("adDiv");
                adDiv.style.display = "block";
                window.clearInterval(time);//显示一次后，清空显示的定时设置
                time = window.setInterval("hide()",5000);//设置隐藏的定时设置
            }
            
            // 隐藏广告的方法:
            function hide(){
                // 获得广告的div元素:
                var adDiv = document.getElementById("adDiv");
                adDiv.style.display="none";//隐藏一次后，清空隐藏的定时设置
                window.clearInterval(time);//设置显示的定时设置
            }