JavaScript海报定时弹框设计
tml代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页的顶端海报弹框操作</title>
</head>
<body>
<div id="ad" style="width:100%;display: none;">
<img src="img/banner1.jpg" width="100%" />
</div>
</body>
</html>
JavaScript代码如下:
<script type="text/javascript">
//记录次数
var i=0;
//定时器id
var timer;
onload=function(){
//设置定时器 间隔4秒后展示图片
timer=setInterval(showAd,4000);
}
//展示广告方法 展示2秒之后隐藏
function showAd(){
//展示的次数加1
i++;
//若i=3 清空由setinterval设置的定时器
if(i==3){
clearInterval(timer);
}
//1.获取广告
var divObj=document.getElementById("ad");
//2.修改广告的样式 将其显示
divObj.style.display="block";
//3.2秒之后隐藏 只执行一次
setTimeout(hideAd,2000);
}
//隐藏广告
function hideAd(){
//1.获取广告
var divObj=document.getElementById("ad");
//2.修改样式 将其隐藏
divObj.style.display="none";
}
</script>
图片素材: banner1
作者: 杨校
出处: http://www.cnblogs.com/xiaoxiao5016
分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件([email protected])咨询。