BOM(一)

1.概述

• BOM（Browser Object Model）即浏览器对象模型，它提供了独立内容而与浏览器窗口进行交互的对象。
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性,其核心对象是windoow。
• BOM缺乏标准，JavaScript语法标准是ECMA，DOM的标准是W3C,BOM的标准是由各浏览器提供商规定的，因此它的兼容性较差。

为了更直观地了解DOM和BOM之间的差异，制作了下表：

DOM	BOM
文档对象模型	浏览器对象模型
把【文档】当做一个【对象】来看	把【浏览器】当做一个【对象】来看
DOM的顶级对象是document	BOM的顶级对象是window
主要是学习操作页面的元素	学习浏览器窗口交互的一些对象
DOM的规范是W3C	BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

2.window 对象常见事件

BOM比DOM更大，它包含了DOM，其构成如下

window

document

location

navigator

screen

history

window 对象是浏览器的顶级对象，它具有双重角色。

1. 它是 JS 访问浏览器窗口的一个接口。
2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
   在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()

2.1 窗口加载事件

等文档全部加载完毕后才会触发该事件

• 传统写法，适用于低版本浏览器，只能写一次，若有多个，则以最后一个window.load为准

window.onload = function(){
     }

• 常用写法：

window.addEventListener(‘load’,function(){
     })

2.2 调整窗口大小事件

只要窗口大小发生变化就会触发此事件，常用于响应式布局。

window.addEventListener('risize',function(){
     })

3.定时器（开发中常用）

（以下均为方法）

3.1 setTimeout()定时器

语法：setTimeout(调用函数，延迟毫秒数)； 注意：这里的时间单位是毫秒
特点：只调用一次就结束
应用：网页上5秒后关闭广告

3.2 setInterval()定时器

语法：setInterval(调用函数，延迟毫秒数)；
特点：间隔不断重复调用
应用：在开发中更为常用，比如倒计时功能或者平时我们发送短信给手机等待获取验证码中的倒计时组件等便是采用这种方法。

3.3 停止定时器

第一种：clearTimeout（timeoutID即定时器名字）
第二种：clearInterval(timeoutID)

3.4 下面举一个倒计时的小案例

倒计时在开发中用的也挺多，比如京东首页上的倒计时秒杀模块.

    <script>
        // 1、获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var settime = +new Date('2021-3-11 17:05:00');//假设设置的时间是2021-3-11 17:05:00
        // 先调用一次函数，防止刷新出现空白
        countdown();
        // 开启定时器
        setInterval(countdown, 1000);
		//倒计时函数
        function countdown() {
     
            var nowtime = +new Date();//电脑当前时间
            var times = (settime - nowtime) / 1000;
            //加一个判断条件，若当前时间到达设定时间时，不再倒计时
            if (times >= 0) {
     
                var h = parseInt(times / 60 / 60 % 24);
                //补0操作，为了美观，当只有一位数时，在前面补0，以两位数呈现出来
                h = h < 10 ? h + '0' : h; 
                hour.innerHTML = h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? m + '0' : m;
                minute.innerHTML = m;
                var s = parseInt(times % 60);
                s = s < 10 ? s + '0' : s;
                second.innerHTML = s;
            }
        }
    </script>

今天就先分享到这啦，若想要倒计时完整代码，可私我哦~