完成頁面定時彈出廣告

需求分析

​ 一般網頁，當我們剛打開的時候，它會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"/>