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（七）—— BOM 浏览器对象模型
本篇为 JavaScript 系列笔记第七篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
Javascript的HTML BOM(浏览器对象模型)
Javascript的HTML BOM(浏览器对象模型) 一.Window 对象浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". Browser O ...
BOM——浏览器对象模型
BOM 浏览器对象模型 BOM 的概念 • BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM 由多个 ...
JS BOM浏览器对象模型
BOM浏览器对象模型 bom概述 BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容与浏览器窗口进行交互的对象,其核心对象的window BOM由一系列相关的对象 ...
BOM浏览器对象模型(Browser Object Model)
文章目录一.BOM浏览器对象模型(Browser Object Model) window对象 window对象的方法 navigator/location/history/screen对象 nav ...
机器学习实战（Machine Learning in Action）学习笔记————06.k-均值聚类算法（kMeans）学习笔记...
机器学习实战(Machine Learning in Action)学习笔记----06.k-均值聚类算法(kMeans)学习笔记关键字:k-均值.kMeans.聚类.非监督学习作者:米仓山下时 ...
【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十一课：Cocos2D-X网格特效1-3
[麦可网]Cocos2d-X跨平台游戏开发---学习笔记第二十一课:Cocos2D-X网格特效1-3 ================================================ ...

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网页特效（略）

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网页特效（略）

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

最新文章

热门文章

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