BOM汇总

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