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])咨询。

猜你喜欢

转载自www.cnblogs.com/xiaoxiao5016/p/9367338.html
今日推荐