當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 什么是BOM（瀏覽器對象模型）
- BOM中的window對象（頂級對象）
- window對象常見事件
- 窗口加載事件 window.onload（等待文檔內容全部加載完成才會觸發，這樣可以把js代碼寫在任何位置）使用方法：window.addEventListener('load', function() {})（這種方法可使用多個）
- 文檔加載事件 使用方法：document.addEventListener('DOMContentLoaded', function() {})（可以不等待樣式表、圖片、flash等加載完成，提高頁面交互效率）
- 調整窗口大小事件（只要窗口大小變化就會觸發事件，可用于響應式布局）使用方法：window.addEventListener('resize', function () {})、window.innerWidth獲取窗口寬度
- 定時器
- window.setTimeout() 單次定時器
- 回調（diao）函數是什么？callback
- setTimeout 定時器案例：5秒后自動關閉廣告
- 停止定時器 clearTimeout
- window.setInterval() 循環定時器
- 京東秒殺倒計時案例
- 停止setInterval定時器： clearInterval()
- 案例：手機短信驗證碼請求倒計時限制
- this指向問題
- JS線程問題（同步和異步）
- 同步與異步
- 一個問題
- JS執行機制：先執行同步任務，再執行異步任務
- 事件循環 event loop
- location對象
- url（uniform resource locator 統一資源定位符）通過location.href查看
- 通過瀏覽器查看location或location.href屬性
- 案例：不通過按鈕點擊，時間一到，自動跳轉頁面
- 案例：數據在不同頁面中的傳遞
- location對象的方法（location.assign() 跳轉頁面，可后退）（location.replace() 跳轉頁面，不可后退，跟location.href()一樣）（location.reload() 刷新或強制刷新頁面）
- navigator 對象（用來判斷是什么設備打開頁面，是移動端還是pc端）
- history對象
- pc網頁特效（略）
什么是BOM（瀏覽器對象模型）
BOM中的window對象（頂級對象）
window對象常見事件
窗口加載事件 window.onload（等待文檔內容全部加載完成才會觸發，這樣可以把js代碼寫在任何位置）使用方法：window.addEventListener(‘load’, function() {})（這種方法可使用多個）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// window.onload = function() {// var btn = document.querySelector('button');// btn.addEventListener('click', function() {// alert('點擊我');// })// }// window.onload = function() {// alert(22);// }window.addEventListener('load', function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('點擊我');})})window.addEventListener('load', function() {alert(22);})document.addEventListener('DOMContentLoaded', function() {alert(33);})// load 等頁面內容全部加載完畢，包含頁面dom元素 圖片 flash css 等等// DOMContentLoaded 是DOM 加載完畢，不包含圖片 falsh css 等就可以執行 加載速度比 load更快一些</script> </head><body><button>點擊</button></body></html>文檔加載事件 使用方法：document.addEventListener(‘DOMContentLoaded’, function() {})（可以不等待樣式表、圖片、flash等加載完成，提高頁面交互效率）
代碼見上
調整窗口大小事件（只要窗口大小變化就會觸發事件，可用于響應式布局）使用方法：window.addEventListener(‘resize’, function () {})、window.innerWidth獲取窗口寬度
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style> </head><body><script>window.addEventListener('load', function () {var div = document.querySelector('div');window.addEventListener('resize', function () {console.log(window.innerWidth);console.log('變化了');if (window.innerWidth <= 800) {div.style.display = 'none';} else {div.style.display = 'block';}})})</script><div></div> </body></html>
定時器
window.setTimeout() 單次定時器
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>// 1. setTimeout // 語法規范： window.setTimeout(調用函數, 延時時間);// 1. 這個window在調用的時候可以省略// 2. 這個延時時間單位是毫秒 但是可以省略，如果省略默認的是0// 3. 這個調用函數可以直接寫函數 還可以寫 函數名 還有一個寫法 '函數名()'// 4. 頁面中可能有很多的定時器，我們經常給定時器加標識符 （名字)// setTimeout(function() {// console.log('時間到了');// }, 2000);function callback() {console.log('爆炸了');}var timer1 = setTimeout(callback, 3000);var timer2 = setTimeout(callback, 5000);// setTimeout('callback()', 3000); // 我們不提倡這個寫法</script> </body></html>回調（diao）函數是什么？callback
setTimeout 定時器案例：5秒后自動關閉廣告
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><img src="蜥蜴女仆.gif" alt="" class="ad"><script>var ad = document.querySelector('.ad');setTimeout(function () {ad.style.display = 'none';}, 5000);</script> </body></html>停止定時器 clearTimeout
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>點擊停止定時器</button><script>var btn = document.querySelector('button');var timer = setTimeout(function() {console.log('爆炸了');}, 5000);btn.addEventListener('click', function() {clearTimeout(timer);})</script> </body></html>window.setInterval() 循環定時器
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>// 1. setInterval // 語法規范： window.setInterval(調用函數, 延時時間);setInterval(function () {console.log('繼續輸出');}, 1000);// 2. setTimeout 延時時間到了，就去調用這個回調函數，只調用一次 就結束了這個定時器// 3. setInterval 每隔這個延時時間，就去調用這個回調函數，會調用很多次，重復調用這個函數</script> </body></html>京東秒殺倒計時案例
停止setInterval定時器： clearInterval()
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button class="begin">開啟定時器</button><button class="stop">停止定時器</button><script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');var timer = null; // 全局變量 null是一個空對象begin.addEventListener('click', function() {timer = setInterval(function() {console.log('ni hao ma');}, 1000);})stop.addEventListener('click', function() {clearInterval(timer);})</script> </body></html>案例：手機短信驗證碼請求倒計時限制
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body>手機號碼： <input type="number"> <button>發送</button><script>// 按鈕點擊之后，會禁用 disabled 為true // 同時按鈕里面的內容會變化， 注意 button 里面的內容通過 innerHTML修改// 里面秒數是有變化的，因此需要用到定時器// 定義一個變量，在定時器里面，不斷遞減// 如果變量為0 說明到了時間，我們需要停止定時器，并且復原按鈕初始狀態var btn = document.querySelector('button');var time = 3; // 定義剩下的秒數btn.addEventListener('click', function() {btn.disabled = true;var timer = setInterval(function() {if (time == 0) {// 清除定時器和復原按鈕clearInterval(timer);btn.disabled = false;btn.innerHTML = '發送';} else {btn.innerHTML = '還剩下' + time + '秒';time--;}}, 1000);})</script> </body></html>this指向問題
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>點擊</button><script>// this 指向問題 一般情況下this的最終指向的是那個調用它的對象// 1. 全局作用域或者普通函數中this指向全局對象window（ 注意定時器里面的this指向window）console.log(this);function fn() {console.log(this);}window.fn();window.setTimeout(function() {console.log(this);}, 1000);// 2. 方法調用中誰調用this指向誰var o = {sayHi: function() {console.log(this); // this指向的是 o 這個對象}}o.sayHi();var btn = document.querySelector('button');// btn.onclick = function() {// console.log(this); // this指向的是btn這個按鈕對象// }btn.addEventListener('click', function() {console.log(this); // this指向的是btn這個按鈕對象})// 3. 構造函數中this指向構造函數的實例function Fun() {console.log(this); // this 指向的是fun 實例對象}var fun = new Fun();</script> </body></html>JS線程問題（同步和異步）
同步與異步
一個問題
打印結果是1、2、3
回調函數屬于異步任務，不屬于同步任務
JS執行機制：先執行同步任務，再執行異步任務
示例：
執行邏輯：
事件循環 event loop
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>// 第一個問題// console.log(1);// setTimeout(function() {// console.log(3);// }, 1000);// console.log(2);// 2. 第二個問題// console.log(1);// setTimeout(function() {// console.log(3);// }, 0);// console.log(2);// 3. 第三個問題console.log(1);document.onclick = function() {console.log('click');}console.log(2);setTimeout(function() {console.log(3)}, 3000)</script> </body></html>location對象
url（uniform resource locator 統一資源定位符）通過location.href查看
通過瀏覽器查看location或location.href屬性
案例：不通過按鈕點擊，時間一到，自動跳轉頁面
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>點擊</button><div></div><script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.addEventListener('click', function() {// console.log(location.href);location.href = 'http://www.itcast.cn';})var timer = 5;setInterval(function() {if (timer == 0) {location.href = 'http://www.itcast.cn';} else {div.innerHTML = '您將在' + timer + '秒鐘之后跳轉到首頁';timer--;}}, 1000);</script> </body></html>
案例：數據在不同頁面中的傳遞
index.html
login.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><form action="index.html">用戶名： <input type="text" name="uname"><input type="submit" value="登錄"></form> </body></html>
location對象的方法（location.assign() 跳轉頁面，可后退）（location.replace() 跳轉頁面，不可后退，跟location.href()一樣）（location.reload() 刷新或強制刷新頁面）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>點擊</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function() {// 記錄瀏覽歷史，所以可以實現后退功能// location.assign('http://www.itcast.cn');// 不記錄瀏覽歷史，所以不可以實現后退功能// location.replace('http://www.itcast.cn');location.reload(true);})</script> </body></html>navigator 對象（用來判斷是什么設備打開頁面，是移動端還是pc端）
history對象
index.html
list.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><a href="index.html">點擊我去往首頁</a><button>后退</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function() {// history.back();history.go(-1);})</script> </body></html>
pc網頁特效（略）
https://www.bilibili.com/video/BV1Sy4y1C7ha?p=287&spm_id_from=pageDriver
總結
以上是生活随笔為你收集整理的JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript学习笔记（5）
- 下一篇： JavaScript学习笔记（7）PC端