1.系統對話框

2.頁面加載的事件

3.window對象下的屬性

3.1 location對象

3.2 history對象

3.3 navigator對象

4.定時器（計時器）——有兩種

4.1 setInterval()和clearInterval()——常用

4.2 setTimeout()和clearTimeout()

5.計時器案例

5.1 圖檔移動

5.2 星星移動

5.3 圖檔時鐘

5.4 協定按鈕禁用

5.5 div漸變

5.6 移動元素（勻速動畫函數）

BOM(Browser Object Model)：浏覽器對象模型，能夠操作浏覽器，比如：重新整理浏覽器、後退、前進、在浏覽器中輸入URL等

window是浏覽器中的頂級對象，document是頁面中的頂級對象

頁面中所有的内容都是屬于浏覽器的——>頁面中的内容也都是window的

當調用window下的屬性和方法時，可以省略window。注意：window下有一個特殊屬性window.name

//console.log(window.name);---空

//var name="hello";

//console.log(window.name);---hello（别輕易使用這個屬性）

//console.log(top);---window

//console.log(window);---window

//window.document.write("100");

//var num=100; console.log(window.num);

//function f1() { console.log("100");} window.f1();

1.系統對話框

以下的對話框，都會使頁面還處在加載狀态（阻塞）；在每個浏覽器中的樣式也都不一樣，且不能修改

1.window.alert("hello");——建議測試的時候使用就好

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

2.window.prompt("請輸入使用者名：");——傳回輸入的那個字元串

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

3.window.confirm("您确定退出嗎");——傳回一個boolean值：點選【确定】傳回true，點選【取消】傳回false

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

2.頁面加載的事件

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

知道一下有這麼兩個事件就行：

離開頁面後才觸發的事件window.οnunlοad=function () {};
離開頁面之前觸發的事件window.οnbefοreunlοad=function () {};

3.window對象下的屬性

以下的對象都是window對象下的屬性，使用的時候可以省略window字首

3.1 location對象

location可以擷取或者設定浏覽器位址欄的URL(Uniform Resource Locator,統一資源定位符)

1.console.log(location);//檢視這個對象的成員(屬性、方法)

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

2.屬性

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

3.方法

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

reload()：重新整理按鈕，參數傳遞一個true，重新整理并清空緩存

3.2 history對象

history對象包含浏覽器曆史

history.back()：等同于在浏覽器點選後退按鈕
history.forward()：等同于在浏覽器中點選前進按鈕
history.length：浏覽器曆史清單中的元素數量（跳轉次數）
history.go()：可加載曆史清單中的某個具體的頁面。參數是數字，使用的是要通路的 URL 在 History 的 URL 清單中的相對位置。（-1上一個頁面，1前進一個頁面)。

使用這些方法的前提是，有曆史記錄。沒有曆史記錄是不可以前進後退的；go方法也無法使用，因為曆史清單中沒有URL。剛打開的頁面，浏覽器曆史清單中隻有目前頁面即隻有1個元素數量。

3.3 navigator對象

navigator對象包含有關通路者的資訊

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//console.log(navigator.userAgent);
            //判斷浏覽器類型
			var st = navigator.userAgent;
			if(/Chrome/i.test(st)) {
				alert("我是谷歌");
			} else if(/Firefox/i.test(st)) {
				alert("我是火狐");
			} else if(/MSIE/i.test(st)) {
				alert("我是ie");
			} else if("ActiveXObject" in window) {
				//ActiveXObject是ie11特有的函數
				//判斷window對象存在ActiveXObject函數
				alert("我是ie11");
			}
		</script>
	</head>
	<body>
		<!--
			navigator.userAgent:代表的浏覽器的資訊【版本】--判斷浏覽器
			谷歌：
			Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
			
			2.火狐
			Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
			
			3.ie8:
			Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.2)
			
			4.ie9:
			Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.2)
			
			5.ie10:
			Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.2)
			
			6.ie11:
			Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.2; rv:11.0) like Gecko
			
			JavaScript判斷浏覽器類型一般有兩種辦法
			一種是根據各種浏覽器獨有的屬性來分辨，另一種是通過分析浏覽器的userAgent屬性來判斷的	
		-->
	</body>

4.定時器（計時器）——有兩種

可以省略window字首

4.1 setInterval()和clearInterval()——常用

第一個參數：要執行的函數；第二個參數：時間(毫秒,1000毫秒=1秒)

參數：setInterval()方法的傳回值，即定時器的id值，是一個number類型的值

在每個時間間隔重複指定的函數：window.setInterval(function, milliseconds);
停止setInterval()方法中指定的函數的執行：window.clearInterval(timeId);

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

4.2 setTimeout()和clearTimeout()

第一個參數：要執行的函數；第二個參數：時間(毫秒,1000毫秒=1秒)

參數：setTimeout()方法的傳回值，即定時器的id值，是一個number類型的值

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

在等待指定的毫秒數後執行指定的函數：window.setTimeout(function, milliseconds);
停止執行setTimeout()中規定的函數：window.clearInterval(timeId);

5.計時器案例

5.1 圖檔移動

<style>
        div {
            position: absolute;        
        }
        img {
            width:120px;
            height:90px;
        }
    </style>

<input type="button" value="圖檔随機移動" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
    <img src="images/pic1.jpg" alt=""/>
    <img src="images/pic2.jpg" alt=""/>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    //點選按鈕時兩張圖檔移動(隻要移動包含兩張圖檔的div就行了),時間間隔1秒
    var timeId;
    my$("btn1").onclick = function () {
        timeId= setInterval(function () {
            //随機數
            var x = parseInt(Math.random() * 100 + 1);//1-100
            var y = parseInt(Math.random() * 100 + 20);//20-119
            //設定元素的left和top屬性值
            my$("dv").style.left = x + "px";
            my$("dv").style.top = y + "px";
        },1000);
    };

    //停止
    my$("btn2").onclick=function () {
        clearInterval(timeId);
    };
</script>

初始：

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

點選移動：（點選停止之後，圖檔停止移動）

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

5.2 星星移動

div {
            width: 200px;
            height: 200px;
            border: 1px solid yellow;
            background-color: black;
            position: relative;
        }
        span {
            font-size: 30px;
            color: yellow;
            position: absolute;
        }
<input type="button" value="亮起來" id="btn"/>
<div id="dv"></div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    my$("btn").onclick = function () {
        //點選按鈕,每5毫秒移動一次星星,造成星星閃亮的效果
        setInterval(function () {
            my$("dv").innerHTML = "<span>★</span>";
            var x = parseInt(Math.random() * 150 + 1);
            var y = parseInt(Math.random() * 150 + 1);
            //移動span
            my$("dv").firstElementChild.style.left = x + "px";
            my$("dv").firstElementChild.style.top = y + "px";
        }, 5);
    }
</script>

5.3 圖檔時鐘

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

5.4 協定按鈕禁用

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

5秒後：

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

5.5 div漸變

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

5.6 移動元素（勻速動畫函數）

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }

        input {
            margin-top: 20px;
        }

        div {
            margin-top: 10px;
            width: 100px;
            height: 50px;
            background-color: green;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" value="移動到400px" id="btn1"/>
<input type="button" value="移動到800px" id="btn2"/>
<div id="dv"></div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    //div要移動,要脫離文檔流---position:absolute

    //擷取div的目前位置
    //1.如果樣式的代碼是在style的标簽中設定,外面是擷取不到
    //2.如果樣式的代碼是在style的屬性設定(行内樣式),外面是可以擷取到的--console.log(my$("dv").style.left);
    //console.log(my$("dv").offsetLeft);--不管樣式代碼使用了以上哪種方式,offsetLeft都可以擷取到

    //點選第一個按鈕移動到400px

    my$("btn1").onclick = function () {
        var timeId= setInterval(function () {
            //擷取div的目前的位置
            var current = my$("dv").offsetLeft;//數字類型,沒有px
            //div每次移動多少像素---步數
            var step =10;
            //每次移動後的距離
            current += step;
            //判斷目前移動後的位置是否到達目标位置
            if(current<=400){
                my$("dv").style.left=current+"px";
            }else{
                //清理定時器
                clearInterval(timeId);
            }
        }, 20);
    };
    //點選第二個按鈕移動到800px

    my$("btn2").onclick = function () {
        var timeId= setInterval(function () {
            //擷取div的目前的位置
            var current = my$("dv").offsetLeft;//數字類型,沒有px
            //div每次移動多少像素---步數
            var step = 10;
            //每次移動後的距離
            current += step;
            //判斷目前移動後的位置是否到達目标位置
            if(current<=800){
                my$("dv").style.left=current+"px";
            }else{
                //清理定時器
                clearInterval(timeId);
            }
        }, 20);
    };
</script>
</body>
</html>

目前這段代碼存在3個問題：

1.定時器多次觸發加速的問題：每點選一次按鈕，就會增加一個定時器，多個定時器疊加，會造成一種“越來越快”的視覺誤差；是以在觸發定時器事件時，需要注意清除上一個定時器。（在div的移動過程中，多次點選按鈕，會發現div的移動速度變快就是這個原因，點選了幾次就有幾個定時器，但是到最後也隻是清除了一個定時器而已）

2.上面的代碼點選按鈕2移動到800px之後，再點選按鈕1無法傳回到400px的位置。

3.如果把step改成9，這時候就不能正好移動到400px的位置，而是396px（因為9不是10的倍數）。

勻速動畫函數（解決了以上三個問題）

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        input {
            margin-top: 20px;
        }

        div {
            margin-top: 10px;
            width: 100px;
            height: 50px;
            background-color: green;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" value="移動到400px" id="btn1"/>
<input type="button" value="移動到800px" id="btn2"/>
<div id="dv"></div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    my$("btn1").onclick = function () {
        animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
        animate(my$("dv"), 800);
    };

 //封裝勻速動畫函數
    function animate(element, target) {
        //先清理定時器
        clearInterval(element.timeId);
        //将定時器id存在對象的一個屬性中
        element.timeId= setInterval(function () {
            var current = element.offsetLeft;
            var step = 9;
            //目标在目前的後面:右移,反之左移
            step = current < target ? step : -step;
            current += step;
            //判斷目前移動後的位置是否到達目标位置
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
             //目标位置和目前位置的絕對值之差小于step的話,直接移動到目标位置,不用再移動一個step
                element.style.left = target + "px";
                clearInterval(element.timeId);
            }
        }, 20);
    }
</script>
</body>
</html>

BOM——window對象下的屬性、定時器、勻速動畫函數1.系統對話框 2.頁面加載的事件3.window對象下的屬性4.定時器（計時器）——有兩種5.計時器案例

1.系統對話框

2.頁面加載的事件

3.window對象下的屬性

3.1 location對象

3.2 history對象

3.3 navigator對象

4.定時器（計時器）——有兩種

4.1 setInterval()和clearInterval()——常用

4.2 setTimeout()和clearTimeout()

5.計時器案例

5.1 圖檔移動

5.2 星星移動

5.3 圖檔時鐘

5.4 協定按鈕禁用

5.5 div漸變

5.6 移動元素（勻速動畫函數）

繼續閱讀

SVM學習筆記（一）

閱讀筆記--java程式設計思想第四版 --接口嵌套

法理學學習筆記Day4——法律規則重點知識點法的微觀結構★★★★★（考察40次）（二級考點）法律規則（二級考點）1.法律

最大子段和問題（分治法和動态規劃）

#人教五上預習#知識點總結#學習打卡ing#學習筆記#假期學習

持續更新調研報告寫作資料，希望各位多多批評指正#寫材料#學習資料分享#學習筆記#每天學習一點點

android學習筆記3：存儲資料存儲 Key-Value 集資料儲存到檔案

安卓學習筆記（九）網絡程式設計網絡程式設計

安卓學習筆記（一） Activity篇

django短信驗證碼的後端實作

天池龍珠計劃Python訓練營-task2筆記清單元組字元串字典集合序列

2022秋招cpp相關面試總結（長期更新）1、記憶體對齊2、類的占用空間死鎖elf優化bin檔案c語言和c++中const差別sizeof原理malloc一塊記憶體free怎麼找到頭尾

2022秋招面試總結（cpp+java+測開）百度測開一面位元組後端一面蝦皮後端一面蝦皮後端二面

nagios服務端搭建

Apache 虛拟主機搭建過程

判斷浏覽器類型與版本以及ios安卓判别