008 BOM

一：说明

1.说明

　　浏览器对象模型

2.顶级对象

　　浏览器中的顶级对象是window

　　页面中的顶级对象是document

　　因此：

　　　变量属于window的，函数也是window的。

　　　就可以使用window.变量，window.函数。

3.window的另一个名字

　　top=window

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script>
 9     var name="tom";
10     console.log(top.name);
11 </script>
12 </body>
13 </html>

4.系统的对话框

　　都不建议使用，一是外表都不同，影响加载。

　　window.alert("mnmnmn")

　　window.prompt("输入:");

　　var result = window.confirm(); true或者false是返回值

二：加载事件

1.页面加载完成之后触发的事件

1 window.onload=function () {
2         
3 }

2.扩展事件

　　事件关闭之前触发：onbeforeunload

　　页面关闭后才触发：onunload

三：Location对象

1.说明

　　是地址栏

　　可以设置和获取URL

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         console.log(window.location);
10     </script>
11 </body>
12 </html>

　　效果：

3.示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示" id="btn">
 9     <script>
10         console.log(window.location.hash);     //#，以及之后的内容
11         console.log(window.location.host);     //主机名及端口号
12         console.log(window.location.hostname);
13         console.log(window.location.pathname);
14         console.log(window.location.port);
15         console.log(window.location.protocol);
16         console.log(window.location.search); //搜索的内容
17 
18         onload=function () {
19             document.getElementById("btn").onclick=function () {
20                 location.href="https://www.baidu.com";     //属性：设置跳转的地址，有后退
21                 location.assign("https://www.baidu.com");  //方法，与上面的相同，有后退
22                 location.reload(); //刷新
23                 location.replace("https://www.baidu.com");  //没有后退，因为没有历史记录
24             }
25         }
26     </script>
27 </body>
28 </html>

四：history

1.程序

　　forward

　　back

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="跳转" id="btn">
 9     <input type="button" value="前进" id="come">
10     <script>
11         document.getElementById("btn").onclick=function () {
12             window.location.href="demo20.html";
13         }
14         document.getElementById("come").onclick=function () {
15             window.history.forward();
16         }
17     </script>
18 </body>
19 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="后退" id="back">
 9     <script>
10         document.getElementById("back").onclick=function () {
11             window.history.back();
12         }
13     </script>
14 </body>
15 </html>

五：navigator

1.说明

　　主要是两个方法

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         //
10         console.log(window.navigator.userAgent);
11 
12         //知道浏览器所在的系统平台类型
13         console.log(window.navigator.platform);
14     </script>
15 </body>
16 </html>

　　效果：

六：定时器

1.说明

　　在BOM中有两个定时器

　　window.setInterval()

　　参数1：函数

　　参数2：时间，毫秒，页面加载完成后，过了多久，开始执行函数。

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="停止" id="btn">
 9     <script>
10         //循环弹出
11         var timeId = window.setInterval(function () {
12             alert("-====")
13         },2000);
14         //清除定时器,将上面的id清除
15         document.getElementById("btn").onclick=function () {
16             window.clearInterval(timeId);
17         }
18     </script>
19 </body>
20 </html>

　　效果：

3.摇起来

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         img {
 8             height: 200px;
 9         }
10         div {
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16     <input type="button" value="动起来" id="btn">
17     <input type="button" value="停止" id="stop">
18     <div id="di">
19         <img src="image/00_1.png" alt="">
20         <img src="image/00_3.jpg" alt="">
21     </div>
22     <script>
23         var timeId = null;
24         document.getElementById("btn").onclick=function () {
25             timeId = window.setInterval(function () {
26                 var x = parseInt(Math.random()*100+1);
27                 var y = parseInt(Math.random()*100+1);
28                 document.getElementById("di").style.left=x+"px";
29                 document.getElementById("di").style.top=y+"px";
30             },10);
31         }
32         document.getElementById("btn").onclick=function (){
33             window.clearInterval(timeId);
34         }
35     </script>
36 </body>
37 </html>

4.图片时钟

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <img src="" alt="" id="img">
 9     <script>
10         //先执行一次
11         function f1(){
12             var dt = new Date();
13             var hour = dt.getHours();
14             var second = dt.getSeconds();
15             hour = hour<10 ? "0"+hour : hour;
16             second = second<10 ? "0"+second : second;
17             //赋值
18             document.getElementById("img").src="meimei/"+hour+"_"+second+".jpg";
19         }
20         //然后定时器
21         window.setInterval(f1,1000);
22     </script>
23 </body>
24 </html>

　　效果：

5.第二个定时器

　　一次性的定时器，执行完就不再执行了。

　　参数1：函数

　　参数2：时间，毫秒

　　返回定时器的id

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         var timeId = window.setTimeout(function () {
10             alert("==")
11         },1000);
12         window.clearTimeout(timeId);
13     </script>
14 </body>
15 </html>

　　在上面要执行setInterval，虽然是一次性的定时器，但是还在内存中，需要清理，所以要再执行。

　　不过这个需要手动执行，这样是不会起到清理的作用。

6.协议按钮禁用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <textarea name="" id="" cols="30" rows="10">
 9         请阅读协议
10     </textarea>
11     <input type="button" value="请阅读(6)" id="btn" disabled="disabled">
12 
13     <!-- 倒计时-->
14     <script>
15         var time = 5;
16         var timeid=window.setInterval(function () {
17             time--;
18             if(time<=0){
19                 clearInterval(timeid);
20                 document.getElementById("btn").value="同意";
21                 document.getElementById("btn").disabled=false;
22             }
23             document.getElementById("btn").value="请阅读("+time+")";
24         },1000);
25     </script>
26 </body>
27 </html>

　　效果：

7.div渐变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 200px;
10             background-color: hotpink;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="div"></div>
16     <br>
17     <input type="button" value="渐变" id="btn">
18     <script>
19         //透明化
20         var opacity = 10;
21         document.getElementById("btn").onclick=function () {
22             var timeId=window.setInterval(function () {
23                 opacity--;
24                 if(opacity<=0){
25                     window.clearInterval(timeId);
26                 }
27                 document.getElementById("div").style.opacity=opacity/10;
28             },100)
29         }
30     </script>
31 </body>
32 </html>

七：动画

1.封装动画函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             /*脱离文档流*/
12             position: absolute;
13         }
14         input {
15             margin-top: 20px;
16         }
17     </style>
18 
19 </head>
20 <body>
21     <input type="button" value="移动到400px" id="btn1"/>
22     <input type="button" value="移动到800px" id="btn2"/>
23     <div id="dv"></div>
24     <script>
25 
26         //设置任意的一个元素,移动到指定的目标位置
27         function animate(element, target) {
28             clearInterval(element.timeId);
29             //定时器的id值存储到对象的一个属性中
30             element.timeId = setInterval(function () {
31                 //获取元素的当前的位置,数字类型
32                 var current = element.offsetLeft;
33                 //每次移动的距离
34                 var step = 10;
35                 step = current < target ? step : -step;
36                 //当前移动到位置
37                 current += step;
38                 if (Math.abs(current - target) > Math.abs(step)) {
39                     element.style.left = current + "px";
40                 } else {
41                     //清理定时器
42                     clearInterval(element.timeId);
43                     //直接到达目标
44                     element.style.left = target + "px";
45                 }
46             }, 20);
47         }
48 
49         document.getElementById("btn1").onclick = function () {
50             animate(document.getElementById("dv"), 400);
51         };
52         //点击第二个按钮移动到800px
53 
54         document.getElementById("btn2").onclick = function () {
55             animate(document.getElementById("dv"), 800);
56         };
57 
58     </script>
59 </body>
60 </html>

2.效果