使用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);//设置显示的定时设置
}