BOM

• BOM 是指浏览器对象的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
• 在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如刷新浏览器、后退、前进、在浏览器中输入URL等。
• window对象 在调用自身的属性和方法时，可以省略"window"不写，可以直接书写他的属性和方法。

window的特殊属性 name

• 在全局作用域定义的全局变量，都是window的一个属性。但是有一个特殊的属性name，window中已经有了name这个属性，当在全局中重新定义name这个属性的时候，只会对原来的属性重新赋值，并且会以string的形式展示。

window的特殊属性 top

• top属性在 window 中，属性值指向的就是顶层的 window 对象，这个属性是只读的，后期不能进行更改。

window 中的对话框

alert

• alert表示警示框，是window中的方法，在调用的时候可以省略 window不写，直接使用alert()方法。用于在浏览器中输出警示内容。
• 语法：alert(1)

prompt

• prompt表示提示框，用户可以在提示框中输入一些内容，并且会返回用户输入的内容。
• 语法：prompt("提示关键字", "默认值")

confirm

• 让用户进行确认或者取消选择的对话框。这个方法有返回值，根据按钮点击情况，如果点击的是确定，返回true，如果点击的是取消，返回false。
• 语法：confirm("提示关键字")

onload 事件

• 我们可以给 window 对象或者 img 等元素添加 onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。例如chrome浏览器渲染加载的机制，由于图片加载时间过长，为了避免等待，图片在加载过程中，会先执行后面的 js 代码。如果在 js 代码中需要使用到图片的宽度和高度等尺寸，在 js 中可能获取不到。

• 其中 window 对象加载完毕，指的是所有HTML结构加载完，并且外部引入资源（js、css、img、视频）也加载完。

• 利用 window.onload 事件，可以将js代码提前到html 结构之前。

• 注意：一个页面中只能有一个 window.onload 事件。因为 onload 是window的一个属性，如果出现多个的话，后面的 onload 事件会覆盖前面的 onload 事件。

• 语法：window.onload = function() {};

延时器

• 延时器是 window 对象的一个方法，类似于定时炸弹、
• 语法：window.setTimeout(func, time)
• 第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()。
• 第二个参数：延时的时间，以毫秒计数，1000毫秒等于1秒。
• 功能：在指定的时候后，延迟执行一个函数。
• 注意：延时器是一个异步语句，在等待的过程中，不会影响后面js代码的正常运行，而是新开辟了一个线程，异步等待。
• 代码示例：

 <script>
    var boom = window.setTimeout(function() {
        console.log("boom");
    }, 2000)
    console.log("1");
    console.log("2");
    console.log("3");
</script>

• 应用场景：可以通过函数节流的方式，防止用户恶意点击事件。
• 示例代码：

<input type="button" value="点击" id="btn">
<script>
    var obtn = document.getElementById("btn");
    // 函数节流 防止恶意点击
    // 定义一个开关，给函数上一把锁，true表示锁是打开状态，可以执行后面的代码，false表示关闭状态，不可以执行后面的代码
    // 初始化状态锁是打开状态
    var lock = true;
    obtn.onclick = function() {
        if (lock) {
            console.log(Math.random())
            lock = false;
        } else {
            return;
        }
        setTimeout(function() {
            lock = true;
        }, 2000)

    }
</script>

清除延时器

• 清除延时器也是 window 对象中的一个方法，用于清除指定的延时器。
• 语法：window.clearTimeout(timeout)
• 参数：指定的延时器变量名引用。
• 功能：清除指定的延时器。
• 注意：清除的延时器需要存储到一个变量中，便于后期清除调用。
• 代码示例：

var boom = window.setTimeout(function() {
    console.log("boom");
}, 2000)
console.log("1");
console.log("2");
console.log("3");

// 清除延时器
window.clearTimeout(boom)

定时器

• 定时器是 window 对象的一个方法，相当于定时闹钟，每隔固定的时间响一次。
• 语法：window.setInterval(func, interval)
• 第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加 ()。
• 第二个参数：时间间隔，以毫秒计数，1000毫秒等于1秒。
• 功能：每隔一个指定的时间，周期性的执行一个函数。
• 注意：
  • 程序执行到定时器代码部分就相当于自动开启了一个定时器，不需要进行其他的打开操作，第一次执行函数时，是在第一个时间间隔之后。
  • 定时器也是一个异步任务。不会影响后续代码的执行。

清除定时器

• window对象的恶一个方法，用于清除指定的定时器。
• 语法：window.clearInterval(timer);
• 参数：指定的定时器变量名引用。
• 功能：清除指定的定时器。
• 注意：清除的定时器需要存储到一个变量中，便于后期清除调用。

定时器案例讲解

<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="end">
<div id="box"></div>
<script>
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var box = document.getElementById("box");
    // 定义全局信号量，与初始化css保持一致
    var nowLeft = 0
    var timer;
    start.onclick = function() {
        timer = setInterval(function() {
            nowLeft += 10;
            box.style.left = nowLeft + "px";
        }, 100);
    };

    end.onclick = function() {
        // 清除定时器
        clearInterval(timer);
    };
</script>

• 点点击开始按钮的时候，会触发onclick 事件，进而会触发定时器，box元素会从左向右移动。

• 当点击暂停按钮的时候，会触发绑定的 onclick 事件，进而会触发清除定时器，box元素会停止移动。

• 存在问题1：

  • 当多次点击开始之后，会出现运动速度越来越快的现象，原因是因为当多次点击之后，会触发多个 onclick 事件，比如点击三次开始按钮，相当于触发了三次 onclick 事件，事件中的 nowLeft+= 10;相当于执行了三次，就会变成 nowLeft += 30，相同时间内，步长更大，所以运动速度就会越来越快。
  • 当对此点击开始之后，再次点击暂停按钮之后，不会停止运动，因为当多次点击开始按钮之后，会触发多个 onclick 事件，timer会指向最后一次的onclick事件，所以点击暂停之后，会清除最后一次的定时器，但是并不会停止运动。

• 解决方法

  • 设表先关
  • 每次开启新定时器之前，都清除一次前面的定时器。

• 存在问题2：

  • 场景：当box到达指定位置之后，自动停止运动，但是会因为步长的原因，可能会超出规定的位置。

• 解决方法：

  • 拉终停表
  • 在执行定时器的时候，判断一下是否执行到了指定的位置，如果此时是大于等于指定位置，则强制将执行的步长赋值为指定的距离。

• 上述问题的解决方案

<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="end">
<div id="box"></div>
<script>
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var box = document.getElementById("box");
    // 定义全局信号量，与初始化css保持一致
    var nowLeft = 0
    var timer;
    start.onclick = function() {
        // 设表先关
        clearInterval(timer);
        timer = setInterval(function() {
            if (nowLeft >= 500) {
                // 拉终停表
                nowLeft = 500;
                // 清除定时器
                clearInterval(timer);
            };
            nowLeft += 10;
            box.style.left = nowLeft + "px";
        }, 100);
    };

    end.onclick = function() {
        // 清除定时器
        clearInterval(timer);
    };
</script>

• 存在问题3：

  • 在规定时间内让元素走到规定的结束位置，时间间隔可以修改，例如让元素在2秒钟内，left属性从 0 走到 500px；

• 解决方法：

  • 步标整除
  • 总距离 = 步长 * 次数；
  • 时间间隔自定义，总时长固定
  • 求出总次数 = 总时间 / 时间间隔
  • 定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            top: 100px;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <input type="button" value="开始" id="start">
    <input type="button" value="暂停" id="end">
    <div id="box"></div>
    <script>
        var start = document.getElementById("start");
        var end = document.getElementById("end");
        var box = document.getElementById("box");
        // 2秒钟left 从 0 走到 500px;
        // 定义全局信号量，与初始化css保持一致
        var startLeft = 0;
        var endLeft = 500;
        // 总时长 2s
        var time = 2000;
        // 时间间隔 50 毫秒
        var interval = 50;
        // 移动次数
        var maxCount = time / interval;
        // 步长
        var step = (endLeft - startLeft) / maxCount;
        // 初始化执行次数
        var count = 0;
        var timer;
        start.onclick = function() {
            // 设表先关
            clearInterval(timer);

            timer = setInterval(function() {
                startLeft += step;
                count++;
                if (count >= maxCount) {
                    // 拉终停表
                    nowLeft = 500;
                    // 设表先关
                    clearInterval(timer);
                };
                
                box.style.left = startLeft + "px";
            }, interval);
        };

        end.onclick = function() {
            // 清除定时器
            clearInterval(timer);
        };
    </script>

</body>

</html>

getComputedStyle() 方法

• 通过getComputedStyle()方法，可以获取css中计算后的样式。
• 语法：window.getCOmputedStyle(ele);
• 第一个参数：获取元素的对象。
• 功能：获取该元素css中计算后的样式。
• 返回：返回一个CSSStyleDeclaration对象，可以通过打点的方式调用对象中的属性，也可以通过中括号的方式调用对象中的属性。

location 对象

• location对象是window对象下的一个属性，使用的时候可以省略 window 对象。
• location 可以获取或者设置浏览器地址栏的 URL。

href 属性

• 返回当前页面的url地址
• 语法：location.href
• 注意：可以通过location.href属性设置新的链接，例如当给一个元素创建点击事件的时候，可以通过 location.href 属性，设置一个新的链接，并且会跳转到这个链接，同时也会记录历史记录。

assign() 方法

• assing()方法的作用与 href 属性一样，可以设置页面跳转的地址。

replace() 方法

• replace() 方法的功能是替换掉地址栏中当前的网址，但是不记录历史，不可以点击浏览器中的后退。

reload() 方法

• reload() 方法的功能是重新加载页面
• 参数：
  • true：强制从服务器获取页面。
  • false：如果浏览器有缓存网页的话，会直接从缓存中获取页面。

history 对象

• history 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象。
• history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存。

forward() 方法

• 功能：前进，查看之前记录的跳转后的页面，相当于浏览器中的前进按钮。
• 语法：history.forward()

back() 方法

• 功能：回退历史记录访问，相当于浏览器中的回退按钮。

go() 方法

• 根据参数自动选择跳转的页面。
• 参数：参数用数字表示，1表示前进到下一个页面，-1表示回退到后一个页面，数字可以累加，其跳转的页面也是在累加。