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安卓判别