目录
4.1 全局作用域中、普通函数中、定时器里面 ( this都指向全局对象window)
6.5 案例2：利用location.search获取URL参数
一、BOM概述
1.1 什么是BOM
1.2 BOM的构成
BOM 比 DOM 更大，它包含 DOM。
1.3 window对象概述
二、window对象的场景事件
2.1 窗口加载事件
例：
<!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>效果：
2.2 调整窗口大小事件
例：
<!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 () { // script写在div前面，必须要写页面加载事件 var div = document.querySelector('div'); window.addEventListener('resize', function () { // 窗口大小发生变化，就会执行里面的处理函数 console.log(window.innerWidth); // 宽度属性 // console.log('变化了'); if (window.innerWidth <= 800) { // 如果窗口宽度<800 就让div隐藏 div.style.display = 'none'; } else { div.style.display = 'block'; } }) }) // 我们经常利用这个事件完成响应式布局 </script> <div></div> </body> </html>效果：
三、定时器
3.1 SetTimeOut 定时器
1）语法规范
window.setTimeout(调用函数, 延时时间);2）注意事项
1) window在调用的时候可以省略,也就是直接写setTimeout();
2) 延时时间的单位默认是是毫秒（如果省略不写，则默认为0）;
3) 调用函数有三种写法：①直接写函数，②写函数名，③采取字符串‘函数名()'三种形式
这个调用函数也叫回调函数。
4) 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
试一下：
效果:
第三秒的时候输出一个爆炸了，第五秒的时候输出一个爆炸了
3）案例1：5秒后自动关闭广告
代码：
效果：
4）案例2：点击按钮关闭setTimeout定时器
代码：
效果：
在设置的定时器的时间之前停止定时器（点击按钮），就不会执行定时器（不会输出爆炸了）
3.2 setInterval定时器
1）语法规范
window.setInterval(回调函数, 间隔时间);2）注意事项
1) window在调用的时候可以省略,也就是直接写setInterval();
2) 间隔的毫秒数如果省略不写，则默认为0;
如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
3) 调用函数有三种写法：①直接写函数，②写函数名，③采取字符串‘函数名()'三种形式
这个调用函数也叫回调函数。
4) 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
5）第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次，会调用很多次，重复调用这个函数
试一下:
3）案例1: 23考研倒计时效果
案例分析：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } html { height: 100%; } body { background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%); } .box { width: 600px; height: 400px; line-height: 60px; padding: 10px; margin: 70px auto; background-color: rgba(0, 0, 0, .5); text-align: center; border-radius: 20px; } .container { height: 90px; line-height: 90px; } span { display: inline-block; width: 90px; height: 90px; line-height: 90px; text-align: center; background-color: rgba(255, 255, 255, .3); color: #fff; font-size: 50px; border-radius: 10px; } .text { margin: 60px 0 50px 0; font-size: 50px; color: rgb(172, 224, 212); } .slogan { margin-top: 40px; font-size: 30px; color: rgb(156, 158, 224); } img { /* 相对浏览器页面 */ position: absolute; top: 0; left: 0; width: 50px; border-radius: 10px; } </style> </head> <body> <div class="box"> <div class="text">距离<i style="color: rgb(209, 70, 70); font-weight: 700; font-size: 80px;">23</i>考研还剩：</div> <div class="container"> <span class="day">d</span> 天 <span class="hour">h</span> 时 <span class="minute">m</span> 分 <span class="second">s</span> 秒 </div> <div class="slogan">今天也要加油加油呀！准研究生~</div> <!-- 鼠标 --> <img src="images/test.jpg" alt=""> </div> <script> // 1 获取元素 var day = document.querySelector('.day'); var hour = document.querySelector('.hour'); var minute = document.querySelector('.minute'); var second = document.querySelector('.second'); // 2 求倒计时还剩的时分秒 function fn() { // var date = new Date(); // 创建一个日期对象 ,不单独获取时分秒 就不需要 var currentTime = +new Date(); // 获取总的毫秒数 var countTime = +new Date('2022-12-24 8:30:00'); // 最好放在函数的外面，全局变量在函数里面也可使用，可修改 var gap_time = (countTime - currentTime) / 1000; // 差值 单位换成秒 // console.log(currentTime); var d = parseInt(gap_time / 60 / 60 / 24); d = d < 10 ? '0' + d : d; day.innerHTML = d; // 把求得的天， 赋值给对应的小时span作为内容显示 var h = parseInt(gap_time / 60 / 60 % 24); h = h < 10 ? '0' + h : h; hour.innerHTML = h; // 把求得的小时， 赋值给对应的小时span作为内容显示 var m = parseInt(gap_time / 60 % 60); m = m < 10 ? '0' + m : m; minute.innerHTML = m; // 把求得的分， 赋值给对应的小时span作为内容显示 var s = parseInt(gap_time % 60); s = s < 10 ? '0' + s : s; second.innerHTML = s; // 把求得的秒， 赋值给对应的小时span作为内容显示 } // 此时只是完成了将倒计时的时分秒送入了span盒子，但不能看到动态的效果（需要手动刷新页面才能看到动态变化） // 4 先调用一次fn函数 fn(); // 3 用定时器 制作动态倒计时效果 window.setInterval(fn, 1000); // window.setInterval('fn()', 1000); // 隔一秒才调用fn （刷新页面后，隔了1s才会显示倒计时的效果，1s前会显示span里面的内容为空(或者span里面原先的文字)） // 解决方法： 在使用定时器之前，先调用一次fn函数 // 5 制作带图标的鼠标 var img = document.querySelector('img'); document.addEventListener('mousemove', function (e) { // 为页面文档注册鼠标移动事件 var x = e.clientX; var y = e.clientY; img.style.top = y - 25 + 'px'; // 调整鼠标到图片居中的位置 img.style.left = x - 10 + 'px'; //不要忘记给left 和top 添加px 单位 }) </script> </body> </html>效果：
4）案例2：点击按钮开启、停止setInterval定时器
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button class="begin">开启定时器</button> <button class="stop">关闭定时器</button> <script> var begin = document.querySelector('.begin'); // 1获取元素 var stop = document.querySelector('.stop'); var timer = null; // 定义为全局变量，在所有函数内部可用，但如果定义在一个函数内，就不能在其他函数内调用(null是一个空对象) begin.addEventListener('click', function () { // 2为begin按钮注册点击事件 // 3开启定时器操作 timer = setInterval(function () { console.log('Hello!'); }, 1000) // 每隔一秒 输出一次 }) stop.addEventListener('click', function () { // 4为stop按钮注册点击事件 // 5关闭定时器操作 clearInterval(timer); }) </script> </body> </html>效果：
5）案例3：发送短信验证码
案例分析：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- // 按钮点击之后，会禁用 disabled 为true // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改 // 里面秒数是有变化的，因此需要用到定时器 // 定义一个变量，在定时器里面，不断递减 // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态 --> <script> window.addEventListener('load', function () { // 将script放在上面 var btn = document.querySelector('button'); // 1获取元素 var text = document.getElementById('text'); var second = 3; // 全局变量 var timer = null; // 全局变量 btn.addEventListener('click', function () { // 2为按钮注册点击事件 btn.disabled = true;// 3点击按钮过后就禁用按钮 timer = setInterval(function () { // 4定时器操作 if (second > 0) { btn.innerHTML = '还剩' + second + 's再次发送'; // 点击了过后 按钮里面的内容变化 , 所以定时器写在点击事件内部 second--; // 每隔一秒调用一次这个函数，second就自减一，刚好可以实现倒计时 } else { clearInterval(timer); // 关闭定时器 btn.disabled = false; // 复原按钮点击状态 btn.innerHTML = '发送验证码'; // 复原按钮默认内容 second = 3; // 在此语句之前代表second==0，想要重启定时器需要重新给second赋值 } }, 1000); // 22~31行都是setInterval()里面调用函数的内容 }) }) </script> 手机号码： <input type="number" name="" id="text"> <button>发送验证码</button> </body> </html>效果：
四、this 的指向问题
4.1 全局作用域中、普通函数中、定时器里面 ( this都指向全局对象window)
4.2 方法调用中 （谁调用 this就指向谁）
4.3 构造函数中 （this指向构造函数的实例）
五、JS执行机制
5.1 JS是单线程
5.2 同步和异步
5.3 同步任务和异步任务
5.4 JS执行机制
在JS当中，会把任务分成同步任务和异步任务，同步任务放到执行栈中，异步任务首先提交给对应的异步进程进行处理（等着用户点击呀、或是等着定时器的时间到达呀、或者是ajax等（里面也有回调函数，也会在某种情况下触发）），等触发完，就把这些异步任务放到任务队列里面，然后等着主线程里面的同步任务全部执行完毕后，再到任务队列里面查看有没有异步任务，如果有就把异步任务放到执行栈中去执行，然后重复地去任务队列里面查看，反复。这种循环的过程成为事件循环（event loop）。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。
5.5 问题+分析执行过程
问题1 ：
问题2 ：
执行结果：
以上两段代码执行的结果都如下：
分析执行的过程：
问题3：
执行结果：（刷新页面的前提下）
如果不点击，则执行结果为： 先输出1 2 ，三秒后再输出3
如果在三秒前点击，则执行结果为：先输出1 2 ,再输出click ,三秒后再输出3
如果在三秒后点击，则执行结果为：先输出1 2 ，三秒后再输出3，然后输出click
分析执行的过程：
同步任务放到执行栈中，异步任务相关回调函数提交给对应的异步进程进行处理（等着用户点击、等着定时器的时间到达）。
如果在3秒前触发了点击事件，等触发完，就把点击事件的回调函数放到任务队列里面，然后等着主线程里面的同步任务（先输出1，再输出2）全部执行完毕后，再到任务队列里面查看有没有异步任务，这时发现有两个异步任务，排在第一的是点击事件任务，排在第二的是定时器的任务，然后依此把它们放到执行栈中去执行（先输出click，再输出了3），然后重复地去任务队列里面查看有无点击事件任务（这里不考虑定时器会再循环，因为用的是setTimeout，而不是setInterval），如果有就把点击事件任务放到执行栈中去执行，然后输出click，以后再有点击事件，就依此输出click了。
如果再3秒后触发了点击事件，那么任务队列里面排放的顺序就变成了 1）定时器任务，2）点击事件任务，输出的就先是3，再是click了。同样地，如果有点击事件，就会再输出click。
六、location对象
6.1 什么是location对象
6.2 什么是URL
6.3 location对象的属性
6.4 案例1：5秒后自动跳转页面
案例分析：
代码：
效果：
6.5 案例2：利用location.search获取URL参数
（主要练习数据在不同页面中的传递）
案例分析：
代码：
login.html
index.html
效果：(暂时不输入中文，会乱码)
6.6 location对象的方法
七、navigator对象 (了解)
userAgent ，可以知道用户用了哪个浏览器打开页面，会送到服务器里面，服务器会根据送过来不同的浏览器情况，显示不同页面。
如果用户是用pc端打开，则显示的是pc端的页面，如果是用手机端打开，则显示手机端的页面。
八、history对象
forward()、go(1)和back()、go(-1)相当于浏览器左上角的前进和后退的箭头。
例子：
index.html
list.html
效果：
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
