2020年10月10日真是痛苦的一天
BOM概述
什么事BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性
BOM缺乏标准,JS语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是网景公司浏览器标准的一部分
DOM和BOM对比
BOM的构成
BOM比DOM更大,它包含DOM
window对象的常见事件
窗口加载事件
window.onload = function () {}
window.addEventListener('load',function () {});
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发改事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注意
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等,IE9以上支持
若页面加载图片较多,从用户访问到onload触发需较长事件,交互效果不能实现,必然影响用户体验,此时用此方法较合适
调整窗口大小事件
window.onresize = function (){}
window.addEventListener('resize',function (){});
//window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数
//window.innerWidrh获取当前屏幕宽度
注意
定时器
window.setTimeout(调用函数,延迟的毫秒数)
setTimeout(callback,2000)
function callback() {
console.log('三秒以后提醒')
}
//用于设置一个定时器,该定时器在定时器到期后执行调用函数
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字)
window.setInterval(回调函数,间隔的毫秒数);
//setInterval()方法重复低啊用一个函数,每隔这个时间,就去调用一次回调函数
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字)
二者区别
setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
停止setTimeout()定时器
window.clearTimeout(timeoutID)
//clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器
//window可以忽略
//里面的参数就是定时器的标识符
停止setInterval定时器
window.clearInterval(intervalID)
//clearInterval()方法取消了先前通过调用setTimeout()建立的定时器
//window可以忽略
//里面的参数就是定时器的标识符
回调函数
案例:五秒之后关闭广告
案例分析
<body>
<img src="/image/erweima.png" alt="">
<script>
var img = document.querySelector('img');
setTimeout(function() {
img.style.display = 'none';
}, 5000)
</script>
</body>
案例:倒计时
案例分析
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('2019-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>
案例:发送短信
<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>
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();