javascript Windows对象（BOM）
window對象是BOM的核心，window對象指當前的瀏覽器窗口。
window對象方法:
注意:在JavaScript基礎篇中，已講解了部分屬性，window對象重點講解計時器。
?
JavaScript 計時器
在JavaScript中，我們可以在設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。
計時器類型：
一次性計時器：僅在指定的延遲時間之后觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次。
計時器方法：
計時器setInterval()
在執行時,從載入頁面后每隔指定的時間執行代碼。
語法:
setInterval(代碼,交互時間);
參數說明：
1. 代碼：要調用的函數或要執行的代碼串。
2. 交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。
調用函數格式(假設有一個clock()函數):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我們設置一個計時器，每隔100毫秒調用clock()函數，并將時間顯示出來，代碼如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>計時器</title> <script?type="text/javascript"> ??var?int=setInterval(clock,?100) ??function?clock(){ ????var?time=new?Date(); ????document.getElementById("clock").value?=?time; ??} </script> </head> <body> ??<form> ????<input?type="text"?id="clock"?size="50"??/> ??</form> </body> </html> |
取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間。
語法：
clearInterval(id_of_setInterval)
參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒調用 clock() 函數,并顯示時間。當點擊按鈕時，停止時間,代碼如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>計時器</title> <script?type="text/javascript"> ???function?clock(){ ??????var?time=new?Date();???????????????????? ??????document.getElementById("clock").value?=?time; ???} //?每隔100毫秒調用clock函數，并將返回值賦值給i ?????var?i=setInterval("clock()",100); </script> </head> <body> ??<form> ????<input?type="text"?id="clock"?size="50"??/> ????<input?type="button"?value="Stop"?onclick="clearInterval(i)"??/> ??</form> </body> </html> |
計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執行一次表達式,僅執行一次。和setInterval()要區分開
語法:
setTimeout(代碼,延遲時間);
參數說明：
1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以豪秒為單位（1s=1000ms)。
當我們打開網頁3秒后，在彈出一個提示框，代碼如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE?HTML> <html> <head> <script?type="text/javascript"> ??setTimeout("alert('Hello!')",?3000?); </script> </head> <body> </body> </html> 當按鈕start被點擊時，setTimeout()調用函數，在5秒后彈出一個提示框。 <!DOCTYPE?HTML> <html> <head> <script?type="text/javascript"> function?tinfo(){ ??var?t=setTimeout("alert('Hello!')",5000); ?} </script> </head> <body> <form> ??<input?type="button"?value="start"?onClick="tinfo()"> </form> </body> </html> |
要創建一個運行于無窮循環中的計數器，我們需要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊后，輸入域便從0開始計數。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE?HTML> <html> <head> <script?type="text/javascript"> var?num=0; function?numCount(){ ?document.getElementById('txt').value=num; ?num=num+1; ?setTimeout("numCount()",1000); ?} </script> </head> <body> <form> <input?type="text"?id="txt"?/> <input?type="button"?value="Start"?onClick="numCount()"?/> </form> </body> </html> |
取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:
clearTimeout(id_of_setTimeout)
參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。
下面的例子和上節的無窮循環的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE?HTML> <html> <head> <script?type="text/javascript"> ??var?num=0,i; ??function?timedCount(){ ????document.getElementById('txt').value=num; ????num=num+1; ????i=setTimeout(timedCount,1000); ??} ????setTimeout(timedCount,1000); ??function?stopCount(){ ????clearTimeout(i); ??} </script> </head> <body> ??<form> ????<input?type="text"?id="txt"> ????<input?type="button"?value="Stop"?onClick="stopCount()"> ??</form> </body> </html> |
History 對象
history對象記錄了用戶曾經瀏覽過的頁面(URL)，并可以實現瀏覽器前進與后退相似導航的功能。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關聯。
語法：
window.history.[屬性|方法]
注意：window可以省略。
History對象屬性：
History對象方法：
使用length屬性，當前窗口的瀏覽歷史總長度，代碼如下：
| 1 2 3 4 | <script?type="text/javascript"> ??var?HL?=?window.history.length; ??document.write(HL); </script> |
1. 返回前一個瀏覽的頁面
back()方法，加載 history 列表中的前一個 URL。
語法：
window.history.back();
比如，返回前一個瀏覽的頁面，代碼如下：
| 1 | window.history.back(); |
注意：等同于點擊瀏覽器的倒退按鈕。
back()相當于go(-1),代碼如下:
| 1 | window.history.go(-1); |
2. 返回下一個瀏覽的頁面
forward()方法，加載 history 列表中的下一個 URL。
如果倒退之后，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:
| 1 | window.history.forward(); |
注意：等價點擊前進按鈕。
forward()相當于go(1),代碼如下:
| 1 | window.history.go(1); |
3. 返回瀏覽歷史中的其他頁面
go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。
語法：
| 1 | window.history.go(number); |
參數：
瀏覽器中，返回當前頁面之前瀏覽過的第二個歷史頁面，代碼如下：
| 1 | window.history.go(-2); |
注意：和在瀏覽器中單擊兩次后退按鈕操作一樣。
同理，返回當前頁面之后瀏覽過的第三個歷史頁面，代碼如下：
| 1 | window.history.go(3); |
Location對象
location用于獲取或設置窗體的URL，并且可以用于解析URL。
語法:
location.[屬性|方法]
location對象屬性圖示:
location 對象屬性：
Navigator對象
Navigator 對象包含有關瀏覽器的信息，通常用于檢測瀏覽器與操作系統的版本。
對象屬性:
查看瀏覽器的名稱和版本，代碼如下:
| 1 2 3 4 5 6 7 | <script?type="text/javascript"> ???var?browser=navigator.appName; ???var?b_version=navigator.appVersion; ???document.write("Browser?name"+browser); ???document.write("<br>"); ???document.write("Browser?version"+b_version); </script> |
userAgent
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
語法
navigator.userAgent
幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。
使用userAgent判斷使用的是什么瀏覽器(假設使用的是IE9瀏覽器),代碼如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | function?validB(){ ??var?u_agent?=?navigator.userAgent; ??var?B_name="Failed?to?identify?the?browser"; ??if(u_agent.indexOf("Firefox")>-1){ ??????B_name="Firefox"; ??}else?if(u_agent.indexOf("Chrome")>-1){ ??????B_name="Chrome"; ??}else?if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ ??????B_name="IE(8-10)";? ??} ????document.write("B_name:"+B_name+"<br>"); ????document.write("u_agent:"+u_agent+"<br>"); } |
運行結果:
screen對象
screen對象用于獲取用戶的屏幕信息。
語法：
window.screen.屬性
對象屬性:
屏幕分辨率的高和寬
window.screen 對象包含有關用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
2. window.screen 對象在編寫時可以不使用 window 這個前綴。
我們來獲取屏幕的高和寬，代碼如下:
| 1 2 3 4 | <script?type="text/javascript"> ??document.write(?"屏幕寬度："+screen.width+"px<br?/>"?); ??document.write(?"屏幕高度："+screen.height+"px<br?/>"?); </script> |
屏幕可用高和寬度
1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務欄。
注意:
不同系統的任務欄默認高度不一樣，及任務欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。
我們來獲取屏幕的可用高和寬度，代碼如下：
| 1 2 3 4 | <script?type="text/javascript"> document.write("可用寬度："?+?screen.availWidth); document.write("可用高度："?+?screen.availHeight); </script> |
注意:根據屏幕的不同顯示值不同
總結
以上是生活随笔為你收集整理的javascript Windows对象（BOM）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript DOM对象
- 下一篇： 很好的分页实例代码（JSP）