JavaScript网站定时弹出广告

需求分析:

一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！

技术分析:

a.定时器
setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval
clearTimeout
b.显示广告 img.style.display = "block"
c.隐藏广告 img.style.display = "none"

显示和隐藏.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01显示和隐藏</title>
		<script>
			function yincang(){
				var im = document.getElementById("img1");
				im.style.display = "none";
			}
			
			function show(){
				var im = document.getElementById("img1");
				im.style.display = "block";
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="show()"/>
		<input type="button" value="隐藏" onclick="yincang()"/><br />
		<img src="../img/1.jpg" width="100%" id="img1"/>
	</body>
</html>

注:文档加载顺序问题这么写是错的.把<script/>标签移到<img/>标签后,才对.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02文档加载顺序</title>
		<script>
			//注:文档加载顺序  这么写是错的.把<script/>标签移到<img/>标签后,才对.
			
			var im = document.getElementById("img1");
			
			function yincang(){
//				var im = document.getElementById("img1");
				im.style.display = "none";
			}
			
			function show(){
//				var im = document.getElementById("img1");
				im.style.display = "block";
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="show()"/>
		<input type="button" value="隐藏" onclick="yincang()"/><br />
		<img src="../img/1.jpg" width="100%" id="img1"/>
	</body>
</html>

步骤分析:

1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告

页面定时弹出广告.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>03页面定时弹出广告</title>
		<!--
        	
        	步骤分析:
			1. 确定事件: 页面加载完成的事件 onload
			2. 事件要触发函数:  init()
			3. init函数里面做一件事: 
			   1. 启动一个定时器 : setTimeout() 
			   2. 显示一个广告
			      1. 再去开启一个定时5秒钟之后,关闭广告
        -->
        <script>
		
			function init(){
				setTimeout("showAD()",3000);
			}
			
			function showAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//显示广告
				img.style.display = "block";
				
				//再开启定时器,关闭广告
				setTimeout("hideAD()",3000);
			}
			
			function hideAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//隐藏广告
				img.style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" width="100%" id="img1" style="display: none;"/>
	</body>
</html>

JavaScript网站定时弹出广告

猜你喜欢