完成頁面定時彈出廣告
需求分析
? 一般網頁，當我們剛打開的時候，它會5秒之后，顯示一個廣告，讓我們看5秒鐘，然后他的廣告就自動消失了！
技術分析
- 定時器
setInterval : 每隔多少毫秒執行一次函式
setTimeout: 多少毫秒之后執行一次函式
clearInterval
clearTimeout
顯示廣告 img.style.display = "block"
隱藏廣告 img.style.display = "none"
步驟分析
- 確定事件: 頁面加載完成的事件 onl oad
- 事件要觸發函式: init()
- init函式里面做一件事:
- 啟動一個定時器 : setTimeout()
- 顯示一個廣告
- 再去開啟一個定時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="https://www.cnblogs.com/zllk/p/js檔案的路徑" type="text/javascript"/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/98463.html
標籤：JavaScript
下一篇：TS 自學筆記（一）