當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）

發布時間：2025/3/20 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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對象（頂級對象）

<!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>// window.document.querySelector()var num = 10;console.log(num);console.log(window.num);function fn() {console.log(11);}fn();window.fn();// alert(11);// window.alert(11)console.dir(window);// var name = 10;console.log(window.name);</script> </body></html>

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>

京東秒殺倒計時案例

<!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 {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style> </head><body><div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>// 1. 獲取元素 var hour = document.querySelector('.hour'); // 小時的黑色盒子var minute = document.querySelector('.minute'); // 分鐘的黑色盒子var second = document.querySelector('.second'); // 秒數的黑色盒子var inputTime = +new Date('2022-5-1 18:00:00'); // 返回的是用戶輸入時間總的毫秒數countDown(); // 我們先調用一次這個函數，防止第一次刷新頁面有空白 // 2. 開啟定時器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); // 返回的是當前時間總的毫秒數var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 var h = parseInt(times / 60 / 60 % 24); //時h = h < 10 ? '0' + h : h;hour.innerHTML = h; // 把剩余的小時給小時黑色盒子var m = parseInt(times / 60 % 60); // 分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60); // 當前的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</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

<!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><div></div><script>console.log(location.search); // ?uname=andy// 1.先去掉？ substr('起始的位置'，截取幾個字符);var params = location.search.substr(1); // uname=andyconsole.log(params);// 2. 利用=把字符串分割為數組 split('=');var arr = params.split('=');console.log(arr); // ["uname", "ANDY"]var div = document.querySelector('div');// 3.把數據寫入div中div.innerHTML = arr[1] + '歡迎您';</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><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

<!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="list.html">點擊我去往列表頁</a><button>前進</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function() {// history.forward();history.go(1);})</script> </body></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端

javascript

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網頁特效（略）

總結

文檔加載事件使用方法：document.addEventListener(‘DOMContentLoaded’, function() {})（可以不等待樣式表、圖片、flash等加載完成，提高頁面交互效率）