写在前面：
每天进步一点点，相信河流终将汇聚成海洋

知识导航：

BOM简介
定时器
三大对象

1. 简介

1.1 何为BOM

BOM（Browser Object Model）浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

1.2 BOM的构成

在这里插入图片描述
window是BOM的顶级对象，可见DOM也是属于BOM的一部分

1.3 常见window对象事件

window对象给js访问浏览器窗口一个接口，同时在js中设置的所有全局变量的全局函数。都会变成window的属性和方法
window的属性和方法在调用时可以省去window.。如alert()全名应是window.alert()

1.3.1 页面加载事件

方法一：
window.addEventListener("load",fn)
window.onload 是页面加载事件，是当文档内容完全加载完成之后才会触发该事件
在这里插入图片描述
如按照js的执行顺序右面的按钮是没有效果的（因为获取的时候按钮都还不存在呢），load事件真正实现了让我们的js放在任何位置
方法二
window.addEventListener("DOMContentLoaded ",fn)（IE9）
它是仅当仅当DOM加载完成（不包括样式表，图片等）就触发。
它的优点在于
如果页面的图片很多的话, 从用户访问到全部加载完成再触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。（图片懒加载）

1.3.2 调整窗口大小事件

resize事件，只要是浏览器窗口大小发生变化时该事件就会触发
栗子：

       window.addEventListener("load", function() {
            window.addEventListener("resize", function() {
                console.log(window.innerWidth);//可获得当前窗口的宽度
            });


        });

在这里插入图片描述

2. 定时器

2.1 setTimeout()

window对象的方法下面我就把window胜率了
方法：
setTimeout（回调函数，延迟的毫秒数不写默认是0）

回调函数：和事件处理函数都是一样的，就是说等一个事件被触发时才执行。这里的触发条件就是多少时间之后

举栗子：

		//	常用的俩种写法
            setTimeout(function() {
                alert("aa");
            }, 1000);

            setTimeout(fn, 1000);

            function fn() {
                alert("aa");
            }

停止计时器：
方法：clearTimeout(计时器名字)
举个栗子：

   var timer = setTimeout(fn, 1000);
	clearTimeout("timer");
            function fn() {
                alert("aa");
            }

2.2 setInterval()

与上面计时器不同的是：上面那个的回调函数只会执行一次，而这个是每隔一段时间便会执行一次
使用方法与上相同：setInterval（回调函数，延迟的毫秒数不写默认是0）
回调函数也是可以直接写匿名函数，或者写命名函数的名字
举个栗子：

        window.addEventListener("load", function() {
            var i = 0
            setInterval(function() {
                console.log(i);
                i  
            }, 500);

        });

在这里插入图片描述

2.3 倒计时案例

案例一：倒计时
先看效果：
在这里插入图片描述
栗子代码：(注意要提前调用一下倒计时函数，因为计时器第一次执行也是1s后所以会有空白。开始先调用一下就好了)

        var div = document.querySelector("div");
        div.innerHTML = getTime("2020-2-10 20:00:00");
        setInterval(function() {
            div.innerHTML = getTime("2020-2-10 20:00:00");

        }, 1000);

        function getTime(time) {
            var time01 =  new Date();
            var time02 =  new Date(time);
            var time03 = (time02 - time01) / 1000;
            var s = parseInt(time03 % 60);
            var m = parseInt(time03 / 60 % 60);
            var h = parseInt(time03 / 60 / 60 % 24);
            var d = parseInt(time03 / 60 / 60 / 24);

            s = s < 10 ? "0"   s : s;
            m = m < 10 ? "0"   m : m;
            h = h < 10 ? "0"   h : h;
            d = d < 10 ? "0"   d : d;

            return "倒计时"   d   "天"   h   "小时"   m   "分"   s   "秒";


        }
    </script>

案例二：发送手机验证码时的按钮
为方便演示我把时间设置成了1s
效果：
在这里插入图片描述
栗子代码：

    <button>发送验证码</button>

    <script>
        var btn = document.querySelector("button");
        var timer = null;
        btn.addEventListener("click", function() {
            this.disabled = "disabled";
            var i = 1;
            btn.innerHTML = "倒计时"   i   "秒";
            timer = setInterval(function() {
                if (i == 0) {
                    clearInterval(timer);
                    btn.disabled = "";
                    btn.innerHTML = "发送验证码";
                    i = 1;

                } else {
                    i--;
                    btn.innerHTML = "倒计时"   i   "秒";

                }

            }, 1000)
        });
    </script>

3. 三大对象

3.1 location对象

location其实是window的一个属性，但是我们用window.location调用的时候返回的是一个对象。所以称他为location对象
利用它可以接下当前窗体的url，或者进行页面跳转

3.1.1 先来看它的属性

在这里插入图片描述
主要来举个search的栗子。
需要页面跳转所以要准备两个html页面

页面一：
<form action="date对象.html">//不写提交默认get方式，且get方式是地址栏传参正是我们需要的
    <label for="uname"></label>
    <input type="text" name="uname" id="">
    <input type="submit" value="提交">
</form>

页面二：

   <script>
        console.log(location.search);
    </script>

先看一眼参数
在这里插入图片描述
结果：
想要得到比较正规的数据，对这个字符串做一下处理即可
重新写一下页面二：字符串内置对象操作传送门

    <script>
        var str = location.search;
        // 去掉？
        var strNew = str.substr(1);
        var strs = strNew.split("=");
        console.log("参数名"   strs[0]   "参数值"   strs[1]);
    </script>

再来看效果：
在这里插入图片描述

3.1.2 再来看它的方法

在这里插入图片描述
举栗子：

    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            location.assign('http://www.baidu.com');
            // 不记录浏览历史，所以不可以实现后退功能
            location.replace('http://www.baidu.com');
            //强制刷新去除缓存
            location.reload(true);
        })
    </script>

3.2 navigator对象

navigator 对象包含有关浏览器的信息
我们最常用的是 userAgent，该属性可以得到我们设备的一些信息

它最常用的操作就是判断我们的终端使用的是pc还是手机，从而转到不到的页面。pc到pc端，手机到移动端
举个栗子：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //转到移动端页面
 } else {
    window.location.href = "";     //转到pc端页面
 }

3.3 history对象

用的很多，简单了解一下它的方法就行了
它与浏览器历史记录进行交互，保存着访问过的url
常用方法：
在这里插入图片描述
简单写一个栗子吧

还是需要准备两个页面
页面一：
<body>
    <a href="content.html">进去content页面</a>
</body>
页面二：
<body>
    <button>返回上个页面</button>
    <script>
        var btn = document.querySelector("button");
        btn.addEventListener("click", function() {
            history.go(-1);
        });
    </script>

</body>