BOM

• BOM 是指瀏覽器對象的模型依啰，瀏覽器對象模型提供了獨立于內(nèi)容的奋献、可以與瀏覽器窗口進行交互的對象結(jié)構(gòu)耕餐。BOM由多個對象組成凡傅，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象肠缔。
• 在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理夏跷，比如刷新瀏覽器、后退明未、前進槽华、在瀏覽器中輸入URL等。
• window對象 在調(diào)用自身的屬性和方法時趟妥，可以省略"window"不寫猫态，可以直接書寫他的屬性和方法。

window的特殊屬性 name

• 在全局作用域定義的全局變量披摄，都是window的一個屬性懂鸵。但是有一個特殊的屬性name，window中已經(jīng)有了name這個屬性行疏，當在全局中重新定義name這個屬性的時候匆光，只會對原來的屬性重新賦值，并且會以string的形式展示酿联。

window的特殊屬性 top

• top屬性在 window 中终息，屬性值指向的就是頂層的 window 對象，這個屬性是只讀的贞让，后期不能進行更改周崭。

window 中的對話框

alert

• alert表示警示框，是window中的方法喳张，在調(diào)用的時候可以省略 window不寫续镇，直接使用alert()方法。用于在瀏覽器中輸出警示內(nèi)容销部。
• 語法：alert(1)

prompt

• prompt表示提示框摸航，用戶可以在提示框中輸入一些內(nèi)容，并且會返回用戶輸入的內(nèi)容舅桩。
• 語法：prompt("提示關(guān)鍵字", "默認值")

confirm

• 讓用戶進行確認或者取消選擇的對話框酱虎。這個方法有返回值，根據(jù)按鈕點擊情況擂涛，如果點擊的是確定读串，返回true，如果點擊的是取消，返回false恢暖。
• 語法：confirm("提示關(guān)鍵字")

onload 事件

• 我們可以給 window 對象或者 img 等元素添加 onload 加載事件排监，表示只有綁定事件的元素加載完畢才能觸發(fā)事件，才能執(zhí)行事件函數(shù)杰捂。例如chrome瀏覽器渲染加載的機制社露，由于圖片加載時間過長，為了避免等待琼娘，圖片在加載過程中峭弟，會先執(zhí)行后面的 js 代碼。如果在 js 代碼中需要使用到圖片的寬度和高度等尺寸脱拼，在 js 中可能獲取不到瞒瘸。

• 其中 window 對象加載完畢，指的是所有HTML結(jié)構(gòu)加載完熄浓，并且外部引入資源（js情臭、css、img赌蔑、視頻）也加載完俯在。

• 利用 window.onload 事件，可以將js代碼提前到html 結(jié)構(gòu)之前娃惯。

• 注意：一個頁面中只能有一個 window.onload 事件跷乐。因為 onload 是window的一個屬性，如果出現(xiàn)多個的話趾浅，后面的 onload 事件會覆蓋前面的 onload 事件愕提。

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

延時器

• 延時器是 window 對象的一個方法，類似于定時炸彈皿哨、
• 語法：window.setTimeout(func, time)
• 第一個參數(shù)：延時執(zhí)行的函數(shù)浅侨，可以是匿名函數(shù)定義，或者是一個函數(shù)名的引用证膨，注意不要加()如输。
• 第二個參數(shù)：延時的時間，以毫秒計數(shù)央勒，1000毫秒等于1秒不见。
• 功能：在指定的時候后，延遲執(zhí)行一個函數(shù)订歪。
• 注意：延時器是一個異步語句脖祈，在等待的過程中肆捕，不會影響后面js代碼的正常運行刷晋，而是新開辟了一個線程，異步等待。
• 代碼示例：

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

• 應用場景：可以通過函數(shù)節(jié)流的方式眼虱，防止用戶惡意點擊事件喻奥。
• 示例代碼：

<input type="button" value="點擊" id="btn">
<script>
    var obtn = document.getElementById("btn");
    // 函數(shù)節(jié)流 防止惡意點擊
    // 定義一個開關(guān)，給函數(shù)上一把鎖捏悬，true表示鎖是打開狀態(tài)撞蚕，可以執(zhí)行后面的代碼，false表示關(guān)閉狀態(tài)过牙，不可以執(zhí)行后面的代碼
    // 初始化狀態(tài)鎖是打開狀態(tài)
    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)
• 參數(shù)：指定的延時器變量名引用寇钉。
• 功能：清除指定的延時器刀疙。
• 注意：清除的延時器需要存儲到一個變量中，便于后期清除調(diào)用扫倡。
• 代碼示例：

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)
• 第一個參數(shù)：每次執(zhí)行的函數(shù)疚鲤，可以是匿名函數(shù)定義，或者是一個函數(shù)名的引用缘挑，注意不要加 ()集歇。
• 第二個參數(shù)：時間間隔，以毫秒計數(shù)语淘，1000毫秒等于1秒鬼悠。
• 功能：每隔一個指定的時間，周期性的執(zhí)行一個函數(shù)亏娜。
• 注意：
  • 程序執(zhí)行到定時器代碼部分就相當于自動開啟了一個定時器焕窝，不需要進行其他的打開操作，第一次執(zhí)行函數(shù)時维贺，是在第一個時間間隔之后它掂。
  • 定時器也是一個異步任務(wù)。不會影響后續(xù)代碼的執(zhí)行溯泣。

清除定時器

• window對象的惡一個方法虐秋，用于清除指定的定時器。
• 語法：window.clearInterval(timer);
• 參數(shù)：指定的定時器變量名引用垃沦。
• 功能：清除指定的定時器客给。
• 注意：清除的定時器需要存儲到一個變量中，便于后期清除調(diào)用肢簿。

定時器案例講解

<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>

• 點點擊開始按鈕的時候蜻拨，會觸發(fā)onclick 事件，進而會觸發(fā)定時器桩引，box元素會從左向右移動缎讼。

• 當點擊暫停按鈕的時候，會觸發(fā)綁定的 onclick 事件坑匠，進而會觸發(fā)清除定時器血崭，box元素會停止移動。

• 存在問題1：

  • 當多次點擊開始之后厘灼，會出現(xiàn)運動速度越來越快的現(xiàn)象夹纫，原因是因為當多次點擊之后，會觸發(fā)多個 onclick 事件设凹，比如點擊三次開始按鈕捷凄，相當于觸發(fā)了三次 onclick 事件，事件中的 nowLeft+= 10;相當于執(zhí)行了三次围来，就會變成 nowLeft += 30跺涤，相同時間內(nèi)，步長更大监透，所以運動速度就會越來越快桶错。
  • 當對此點擊開始之后，再次點擊暫停按鈕之后胀蛮，不會停止運動院刁，因為當多次點擊開始按鈕之后，會觸發(fā)多個 onclick 事件粪狼，timer會指向最后一次的onclick事件退腥，所以點擊暫停之后，會清除最后一次的定時器再榄，但是并不會停止運動狡刘。

• 解決方法

  • 設(shè)表先關(guān)
  • 每次開啟新定時器之前，都清除一次前面的定時器困鸥。

• 存在問題2：

  • 場景：當box到達指定位置之后嗅蔬，自動停止運動，但是會因為步長的原因疾就，可能會超出規(guī)定的位置澜术。

• 解決方法：

  • 拉終停表
  • 在執(zhí)行定時器的時候，判斷一下是否執(zhí)行到了指定的位置猬腰，如果此時是大于等于指定位置鸟废，則強制將執(zhí)行的步長賦值為指定的距離。

• 上述問題的解決方案

<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() {
        // 設(shè)表先關(guān)
        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：

  • 在規(guī)定時間內(nèi)讓元素走到規(guī)定的結(jié)束位置盒延，時間間隔可以修改缩擂，例如讓元素在2秒鐘內(nèi)，left屬性從 0 走到 500px兰英；

• 解決方法：

  • 步標整除
  • 總距離 = 步長 * 次數(shù)撇叁；
  • 時間間隔自定義供鸠，總時長固定
  • 求出總次數(shù) = 總時間 / 時間間隔
  • 定義計數(shù)器變量畦贸，每執(zhí)行一次定時器函數(shù)增加計數(shù)1，直到執(zhí)行達到總次數(shù)楞捂，停止定時器薄坏。

<!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;
        // 移動次數(shù)
        var maxCount = time / interval;
        // 步長
        var step = (endLeft - startLeft) / maxCount;
        // 初始化執(zhí)行次數(shù)
        var count = 0;
        var timer;
        start.onclick = function() {
            // 設(shè)表先關(guān)
            clearInterval(timer);

            timer = setInterval(function() {
                startLeft += step;
                count++;
                if (count >= maxCount) {
                    // 拉終停表
                    nowLeft = 500;
                    // 設(shè)表先關(guān)
                    clearInterval(timer);
                };
                
                box.style.left = startLeft + "px";
            }, interval);
        };

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

</body>

</html>

getComputedStyle() 方法

• 通過getComputedStyle()方法寨闹，可以獲取css中計算后的樣式胶坠。
• 語法：window.getCOmputedStyle(ele);
• 第一個參數(shù)：獲取元素的對象。
• 功能：獲取該元素css中計算后的樣式繁堡。
• 返回：返回一個CSSStyleDeclaration對象沈善，可以通過打點的方式調(diào)用對象中的屬性，也可以通過中括號的方式調(diào)用對象中的屬性椭蹄。

location 對象

• location對象是window對象下的一個屬性闻牡，使用的時候可以省略 window 對象。
• location 可以獲取或者設(shè)置瀏覽器地址欄的 URL绳矩。

href 屬性

• 返回當前頁面的url地址
• 語法：location.href
• 注意：可以通過location.href屬性設(shè)置新的鏈接罩润，例如當給一個元素創(chuàng)建點擊事件的時候，可以通過 location.href 屬性翼馆，設(shè)置一個新的鏈接割以，并且會跳轉(zhuǎn)到這個鏈接，同時也會記錄歷史記錄应媚。

assign() 方法

• assing()方法的作用與 href 屬性一樣严沥，可以設(shè)置頁面跳轉(zhuǎn)的地址。

replace() 方法

• replace() 方法的功能是替換掉地址欄中當前的網(wǎng)址中姜，但是不記錄歷史祝峻，不可以點擊瀏覽器中的后退。

reload() 方法

• reload() 方法的功能是重新加載頁面
• 參數(shù)：
  • true：強制從服務(wù)器獲取頁面扎筒。
  • false：如果瀏覽器有緩存網(wǎng)頁的話莱找，會直接從緩存中獲取頁面。

history 對象

• history 對象是 window 對象下的一個屬性嗜桌，使用的時候可以省略 window 對象奥溺。
• history 對象可以與瀏覽器歷史記錄進行交互，瀏覽器歷史記錄是對用戶所訪問的頁面按時間順序進行的記錄和保存骨宠。

forward() 方法

• 功能：前進浮定，查看之前記錄的跳轉(zhuǎn)后的頁面相满，相當于瀏覽器中的前進按鈕。
• 語法：history.forward()

back() 方法

• 功能：回退歷史記錄訪問桦卒，相當于瀏覽器中的回退按鈕立美。

go() 方法

• 根據(jù)參數(shù)自動選擇跳轉(zhuǎn)的頁面。
• 參數(shù)：參數(shù)用數(shù)字表示方灾，1表示前進到下一個頁面建蹄，-1表示回退到后一個頁面，數(shù)字可以累加裕偿，其跳轉(zhuǎn)的頁面也是在累加洞慎。