13 -1 BOM和定時器

時間 2019-11-29

標籤 bom 定時器简体版

原文原文鏈接

一 BOMhtml

JavaScript基礎分爲三個部分：linux

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。瀏覽器
DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。框架
BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。異步

從上圖也能夠看出：ide

window對象是BOM的頂層(核心)對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象。函數
DOM是BOM的一部分。url

window對象：spa

window對象是JavaScript中的頂級對象。code
全局變量、自定義函數也是window對象的屬性和方法。
window對象下的屬性和方法調用時，能夠省略window。

一、打開窗口：

window.open(url,target)

參數解釋：

url：要打開的地址。
target：新窗口的位置。能夠是：_blank 、_self、 _parent 父框架。

2 location對象的屬性

href：跳轉
hash 返回url中#後面的內容，包含#
host 主機名，包括端口
hostname 主機名
pathname url中的路徑部分
protocol 協議通常是http、https
search 查詢字符串

例子

 1 <body>
 2 <div>smyhvae</div>
 3 <script>
 4 
 5     var div = document.getElementsByTagName("div")[0];
 6 
 7     div.onclick = function () {
 8         location.href = "http://www.baidu.com";   //點擊div時，跳轉到指定連接
 9  //     window.open("http://www.baidu.com","_blank");  //方式二
10     }
11 
12 </script>
13 </body>

3 navigator對象

window.navigator 的一些屬性能夠獲取客戶端的一些信息。

userAgent：系統，瀏覽器)
platform：瀏覽器支持的系統，win/mac/linux

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BOM</title>
 6 </head>
 7 <body>
 8 <script>
 9     window.onload=function (ev) {
10         console.log(111);
11         console.log(window.navigator);
12         console.log(navigator.userAgent);
13         console.log(navigator.platform);//查看瀏覽器支持的系統
14 
15         setTimeout(function () {
16             //這兩個不能同時存在
17             window.open('http://www.baidu.com','_self');//打開一個新的網頁
18             // window.location.reload();//2秒以後整改網頁刷新，全局刷新，不建議使用
19 
20         },2000);
21 
22     }
23 </script>
24 
25 </body>
26 </html>

View Code

二定時器

在js中的定時器分兩種：一、setTimeout() 二、setInterval()

1.setTimeOut()

只在指定時間後執行一次

1 /定時器 異步運行  
2 function hello(){  
3 alert("hello");  
4 }  
5 //使用方法名字執行方法  
6 var t1 = window.setTimeout(hello,1000);  
7 var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
8 window.clearTimeout(t1);//去掉定時器

2.setInterval()

在指定時間爲週期循環執行

1 /實時刷新  時間單位爲毫秒  
2 setInterval('refreshQuery()',8000);   
3 /* 刷新查詢 */  
4 function refreshQuery(){  
5   console.log('每8秒調一次') 
6 }

兩種方法根據不一樣的場景和業務需求擇而取之，

對於這兩個方法，須要注意的是若是要求在每隔一個固定的時間間隔後就精確地執行某動做，那麼最好使用setInterval，而若是不想因爲連續調用產生互相干擾的問題，尤爲是每次函數的調用須要繁重的計算以及很長的處理時間，那麼最好使用setTimeout

相關標籤/搜索

每日一句

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