當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 什么是BOM（瀏覽器對象模型）
- BOM中的window對象（頂級對象）
- window對象常見事件
- 窗口加載事件 window.onload（等待文檔內(nèi)容全部加載完成才會觸發(fā)，這樣可以把js代碼寫在任何位置）使用方法：window.addEventListener('load', function() {})（這種方法可使用多個）
- 文檔加載事件 使用方法：document.addEventListener('DOMContentLoaded', function() {})（可以不等待樣式表、圖片、flash等加載完成，提高頁面交互效率）
- 調(diào)整窗口大小事件（只要窗口大小變化就會觸發(fā)事件，可用于響應(yīng)式布局）使用方法：window.addEventListener('resize', function () {})、window.innerWidth獲取窗口寬度
- 定時器
- window.setTimeout() 單次定時器
- 回調(diào)（diao）函數(shù)是什么？callback
- setTimeout 定時器案例：5秒后自動關(guān)閉廣告
- 停止定時器 clearTimeout
- window.setInterval() 循環(huán)定時器
- 京東秒殺倒計(jì)時案例
- 停止setInterval定時器： clearInterval()
- 案例：手機(jī)短信驗(yàn)證碼請求倒計(jì)時限制
- this指向問題
- JS線程問題（同步和異步）
- 同步與異步
- 一個問題
- JS執(zhí)行機(jī)制：先執(zhí)行同步任務(wù)，再執(zhí)行異步任務(wù)
- 事件循環(huán) event loop
- location對象
- url（uniform resource locator 統(tǒng)一資源定位符）通過location.href查看
- 通過瀏覽器查看location或location.href屬性
- 案例：不通過按鈕點(diǎn)擊，時間一到，自動跳轉(zhuǎn)頁面
- 案例：數(shù)據(jù)在不同頁面中的傳遞
- location對象的方法（location.assign() 跳轉(zhuǎn)頁面，可后退）（location.replace() 跳轉(zhuǎn)頁面，不可后退，跟location.href()一樣）（location.reload() 刷新或強(qiáng)制刷新頁面）
- navigator 對象（用來判斷是什么設(shè)備打開頁面，是移動端還是pc端）
- history對象
- pc網(wǎng)頁特效（略）
什么是BOM（瀏覽器對象模型）
BOM中的window對象（頂級對象）
window對象常見事件
窗口加載事件 window.onload（等待文檔內(nèi)容全部加載完成才會觸發(fā)，這樣可以把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('點(diǎn)擊我');// })// }// window.onload = function() {// alert(22);// }window.addEventListener('load', function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('點(diǎn)擊我');})})window.addEventListener('load', function() {alert(22);})document.addEventListener('DOMContentLoaded', function() {alert(33);})// load 等頁面內(nèi)容全部加載完畢，包含頁面dom元素 圖片 flash css 等等// DOMContentLoaded 是DOM 加載完畢，不包含圖片 falsh css 等就可以執(zhí)行 加載速度比 load更快一些</script> </head><body><button>點(diǎn)擊</button></body></html>文檔加載事件 使用方法：document.addEventListener(‘DOMContentLoaded’, function() {})（可以不等待樣式表、圖片、flash等加載完成，提高頁面交互效率）
代碼見上
調(diào)整窗口大小事件（只要窗口大小變化就會觸發(fā)事件，可用于響應(yīng)式布局）使用方法：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 // 語法規(guī)范： window.setTimeout(調(diào)用函數(shù), 延時時間);// 1. 這個window在調(diào)用的時候可以省略// 2. 這個延時時間單位是毫秒 但是可以省略，如果省略默認(rèn)的是0// 3. 這個調(diào)用函數(shù)可以直接寫函數(shù) 還可以寫 函數(shù)名 還有一個寫法 '函數(shù)名()'// 4. 頁面中可能有很多的定時器，我們經(jīng)常給定時器加標(biāo)識符 （名字)// 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>回調(diào)（diao）函數(shù)是什么？callback
setTimeout 定時器案例：5秒后自動關(guān)閉廣告
<!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>點(diǎn)擊停止定時器</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() 循環(huán)定時器
<!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 // 語法規(guī)范： window.setInterval(調(diào)用函數(shù), 延時時間);setInterval(function () {console.log('繼續(xù)輸出');}, 1000);// 2. setTimeout 延時時間到了，就去調(diào)用這個回調(diào)函數(shù)，只調(diào)用一次 就結(jié)束了這個定時器// 3. setInterval 每隔這個延時時間，就去調(diào)用這個回調(diào)函數(shù)，會調(diào)用很多次，重復(fù)調(diào)用這個函數(shù)</script> </body></html>京東秒殺倒計(jì)時案例
停止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>案例：手機(jī)短信驗(yàn)證碼請求倒計(jì)時限制
<!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>手機(jī)號碼： <input type="number"> <button>發(fā)送</button><script>// 按鈕點(diǎn)擊之后，會禁用 disabled 為true // 同時按鈕里面的內(nèi)容會變化， 注意 button 里面的內(nèi)容通過 innerHTML修改// 里面秒數(shù)是有變化的，因此需要用到定時器// 定義一個變量，在定時器里面，不斷遞減// 如果變量為0 說明到了時間，我們需要停止定時器，并且復(fù)原按鈕初始狀態(tài)var btn = document.querySelector('button');var time = 3; // 定義剩下的秒數(shù)btn.addEventListener('click', function() {btn.disabled = true;var timer = setInterval(function() {if (time == 0) {// 清除定時器和復(fù)原按鈕clearInterval(timer);btn.disabled = false;btn.innerHTML = '發(fā)送';} 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>點(diǎn)擊</button><script>// this 指向問題 一般情況下this的最終指向的是那個調(diào)用它的對象// 1. 全局作用域或者普通函數(shù)中this指向全局對象window（ 注意定時器里面的this指向window）console.log(this);function fn() {console.log(this);}window.fn();window.setTimeout(function() {console.log(this);}, 1000);// 2. 方法調(diào)用中誰調(diào)用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. 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實(shí)例function Fun() {console.log(this); // this 指向的是fun 實(shí)例對象}var fun = new Fun();</script> </body></html>JS線程問題（同步和異步）
同步與異步
一個問題
打印結(jié)果是1、2、3
回調(diào)函數(shù)屬于異步任務(wù)，不屬于同步任務(wù)
JS執(zhí)行機(jī)制：先執(zhí)行同步任務(wù)，再執(zhí)行異步任務(wù)
示例：
執(zhí)行邏輯：
事件循環(huán) 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 統(tǒng)一資源定位符）通過location.href查看
通過瀏覽器查看location或location.href屬性
案例：不通過按鈕點(diǎn)擊，時間一到，自動跳轉(zhuǎn)頁面
<!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>點(diǎn)擊</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 + '秒鐘之后跳轉(zhuǎn)到首頁';timer--;}}, 1000);</script> </body></html>
案例：數(shù)據(jù)在不同頁面中的傳遞
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() 跳轉(zhuǎn)頁面，可后退）（location.replace() 跳轉(zhuǎn)頁面，不可后退，跟location.href()一樣）（location.reload() 刷新或強(qiáng)制刷新頁面）
<!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>點(diǎn)擊</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function() {// 記錄瀏覽歷史，所以可以實(shí)現(xiàn)后退功能// location.assign('http://www.itcast.cn');// 不記錄瀏覽歷史，所以不可以實(shí)現(xiàn)后退功能// location.replace('http://www.itcast.cn');location.reload(true);})</script> </body></html>navigator 對象（用來判斷是什么設(shè)備打開頁面，是移動端還是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">點(diǎn)擊我去往首頁</a><button>后退</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function() {// history.back();history.go(-1);})</script> </body></html>
pc網(wǎng)頁特效（略）
https://www.bilibili.com/video/BV1Sy4y1C7ha?p=287&spm_id_from=pageDriver
總結(jié)
以上是生活随笔為你收集整理的JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript学习笔记（5）
- 下一篇： JavaScript学习笔记（7）PC端