使用JavaScript完成定时弹出广告

完成页面定时弹出广告

需求分析

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

技术分析

• 定时器
  setInterval : 每隔多少毫秒执行一次函数
  setTimeout: 多少毫秒之后执行一次函数
  clearInterval
  clearTimeout

显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

步骤分析

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>

扩展

• JS的文件加载顺序问题
  javascript文档加载顺序问题

• JS的引入方式

引入一个外部js文件

<script src="js文件的路径"  type="text/javascript"/>