目录
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
效果: