008 BOM

時間 2019-11-17

標籤 bom 简体版

原文原文鏈接

一：說明html

1.說明瀏覽器

　　瀏覽器對象模型dom

2.頂級對象函數

　　瀏覽器中的頂級對象是window動畫

　　頁面中的頂級對象是documentspa

　　所以：code

　　　變量屬於window的，函數也是window的。orm

　　　就能夠使用window.變量，window.函數。htm

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.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。