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
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。
