BOM系列目录
前言
BOM(Browser Object Model)即浏览器对象模型,提供了独立于内容而与浏览器窗口交互的对象,其核心对象是window。
提示:以下是本篇文章正文内容,下面案例可供参考
一、BOM的构成
window对象是浏览器对象的顶级模型,它具有双重角色
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象,定义在全局作用域中的变量、函数都会变为window对象的属性和方法。 调用的时候可以省略window,如alert(),prompt()等。
二、Window常见事件对象
window.onload = function() {}
或者
window.addEventListener('load',function() {});
window.onload就是页面加载事件,当文档内容全部加载完毕会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数
DOMContentLoaded
事件触发是,仅当DOM加载完毕,不包括样式表,图片和flash等等。
如果页面图片特别多,从用户访问onload到页面加载需要很多时间,因此可以用DOMContentLoaded.
❤窗口加载事件
window.onresize
是调整窗口大小加载事件,当触发时就调用的处理函数。
window.onresize = function() {}
window.addEventListener('resize',function(){});
<script>
window.addEventListener('resize',function() {
console.log('你真的好帅');
只要窗口大小的像素发生变化就会触发该事件
// 我们经常用这个事件完成响应式布局,window.innerWidth当前屏幕的宽度
})
</script>
三、定时器
两个定时器
setTimeout()
setInterval()
<!-- setTimeout() 定时器 -->
<!-- window.setTimeout (调用函数,[延迟的毫秒数]); -->
<!-- setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数 只调用一次 -->
<script>
// window在调用的时候经常省略
// 这个调用函数可以直接写函数,也可以调用函数名
// 页面中可能有很多的定时器,我们给他定时器加标识符(名字)
setTimeout(function() {
console.log('夕颜好帅');
} ,200);
function callback () {
console.log(666);
}
var time1 = setTimeout(callback ,3000);
var time1 = setTimeout(callback ,4000);
// setTimeout(callback ,3000);
// 停止定时器
// 停止setTimeout()定时器
window.clearTimeout(timeoutID);
</script>
<!-- window.setInterval(); 反复调用一个函数,每间隔这个时间,就去回调一次函数,可以多次调用-->
<script>
setInterval(function(){
console.log('我好帅');
},1000);
</script>
案例1
1.这个倒计时是不断变化的,所以用定时器来自动变化setInt