「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。
BOM概述
BOM( Browser Object Model)即是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM的构成
window对象是浏览器的顶级对象 它具有双重角色：
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象 定义在全局作用域的变量、函数都会变成window对象的属性和方法 在调用的时候可以省略window 前面学习的对话框都属于window对象方法 如alert() prompt() 注意：window下有一个特殊属性window.name
window对象常见属性
窗口加载事件
//两种写法
//window.onload = function(){}
//window.addEventListener('load',function(){});
- 当文档内容完全加载完成后触发该事件（包括图像、脚本文件、CSS、文件）就调用的处理函数
- window.onload传统注册事件方式 只能写一次 如果有多个 会以最后一个window.onload为准
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
window.addEventListener('load',function(){
alert(1);
})
// DOMContentLoaded 是DOM 加载完毕，不包含图片 flash css 等就可以执行 加载速度比 load更快一些
window.addEventListener('DOMContentLoaded',function(){
alert(2);
})
调整窗口大小事件
window.onresize是调整窗口大小加载事件 当触发时调用的处理函数 直接上例子
//css部分省略
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) { //宽度小于800，不显示
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
两种定时器
setTimeout()
setTimeout定时器的使用
//window可以省略，单位是毫秒，默认不写是0
//只调用一次就结束这个定时器
window.setTimeout(funtion(){
console.log(1);
},1000)
//可以以这种调用函数的方式
//function time(){
console.log(2);
}
setTimeout(time,2000)
停止setTimeout定时器
clearTimeout() 上案例
<button>结束定时器</button>
var btn = document.querySelector('button');
var timer = setTimeout(function(){
console.log('定时器');
},5000);
btn.addEventListener('click',function(){
clearTimeout(timer);
})
setInterval()
setInterval()定时器 反复调用一个函数 每隔一段时间 就去调用一次回调函数 srtInterval(function(){ },间隔时间)
<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('开始');
},1000);//每隔一秒就输出一次“开始”
});
stop.addEventListener('click',function(){
clearInterval(timer);
})
</script>
</body>
上两个常见案例
1.页面倒计时案例
<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>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = new Date('2020-6-04 18:00:00');//现在的时间是2020-6-3
countDown();// 我们先调用一次这个函数，防止第一次刷新页面有空白
//3.定时器
setInterval(countDown,1000);
//2.时间
function countDown(){
var nowTime = new Date();
var times = (inputTime - nowTime) / 1000;//变成秒
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>
案例结果
2.发送短信定时器案例
手机号码： <input type="number">
<button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 3;
btn.addEventListener('click',function(){
this.disabled = true; //this指向btn
var timer = setInterval(function(){
if (time == 0){
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = "发送";
time = 3;
}else{
btn.innerHTML = "还剩"+time+"秒";
time--;
}
},1000)
})
</script>
定时器跳转页面案例
<body>
<div></div>
<script>
//案例分析：定时器做倒数效果
//时间一到 location.href跳转
var div = document.querySelector('div');
var time = 5;
setInterval(function () {
if (time == 0) {
location.href = "https://space.bilibili.com/289427243/favlist?fid=810952643&ftype=create";
} else {
div.innerHTML = "页面将在" + time + "秒后跳转";
time--;
}
}, 1000)
</script>
</body>
同步和异步
js语言的一大特点就是单线程，也就是说，同一时间只能做一件事情 为了解决这个问题，js出现了同步和异步
同步和异步
一般而言，js的异步是通过回调函数实现的，异步任务有一下几种类型
- 普通事件：click，resize等
- 资源加载：load，eroor等
- 定时器：setTimeout，setInterval
执行机制
- 先执行栈中的同步任务
- 遇见异步任务，先放在任务队列中
- 一旦执行栈里面的同步任务执行完毕，系统就会按次序执行任务队列里的异步任务，于是被读取的异步任务结束等待状态， 进入执行栈 开始执行
Location对象
- Location对象给我们提供了一个Location属性用于获取或设置窗体的URL，并且可以用来解析URL
- 因为这个属性返回的是一个对象，所以这个对象也被称为location对象 URL：统一资源定位器，是互联网上标准资源的地址，互联网上每一个文件都有一个唯一的URL地址，它包含的信息是文件位置以及浏览器该怎么处理它
//location对象属性 返回值
//location.href 获取或设置整个URL
//location.host 返回主机（域名）
//location.port 返回端口号 如果未写 返回空字符串
//location.pathname 返回路径
//location.search 返回参数
//location.hash 返回片段 #后面内容 常见于链接 瞄点
//location对象方法 返回值
//location.assign("地址") 跟href一样 可以跳转页面(也称重定向页面) 记录历史 可以后退页面
//location.replace("地址") 替换当前页面 因为不记录历史 所以不能后退页面
//location.reload() 重新加载页面 相当于刷新或者 f5 如果参数为true 强制刷新 ctrl+f5
history对象
window对象给我提供了一个History对象，与浏览器历史进行交互
history.back();//后退功能
history.forward();//前进功能
history.go(参数);//前进或者后退，参数为负数就是后退几步，参数为正数就是前几几步
目前就想到这些~ ~ ~
