javascript
javascript Windows对象（BOM）
window對象是BOM的核心，window對象指當(dāng)前的瀏覽器窗口。
window對象方法:
注意:在JavaScript基礎(chǔ)篇中，已講解了部分屬性，window對象重點講解計時器。
?
JavaScript 計時器
在JavaScript中，我們可以在設(shè)定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計時器類型：
一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次。
計時器方法：
計時器setInterval()
在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行代碼。
語法:
setInterval(代碼,交互時間);
參數(shù)說明：
1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 交互時間：周期性執(zhí)行或調(diào)用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。
調(diào)用函數(shù)格式(假設(shè)有一個clock()函數(shù)):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我們設(shè)置一個計時器，每隔100毫秒調(diào)用clock()函數(shù)，并將時間顯示出來，代碼如下:
| 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() 設(shè)置的交互時間。
語法：
clearInterval(id_of_setInterval)
參數(shù)說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒調(diào)用 clock() 函數(shù),并顯示時間。當(dāng)點擊按鈕時，停止時間,代碼如下:
| 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毫秒調(diào)用clock函數(shù)，并將返回值賦值給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()計時器，在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次。和setInterval()要區(qū)分開
語法:
setTimeout(代碼,延遲時間);
參數(shù)說明：
1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 延時時間：在執(zhí)行代碼前需等待的時間，以豪秒為單位（1s=1000ms)。
當(dāng)我們打開網(wǎng)頁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> 當(dāng)按鈕start被點擊時，setTimeout()調(diào)用函數(shù)，在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> |
要創(chuàng)建一個運行于無窮循環(huán)中的計數(shù)器，我們需要編寫一個函數(shù)來調(diào)用其自身。在下面的代碼，當(dāng)按鈕被點擊后，輸入域便從0開始計數(shù)。
| 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)
參數(shù)說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。
下面的例子和上節(jié)的無窮循環(huán)的例子相似。唯一不同是，現(xiàn)在我們添加了一個 "Stop" 按鈕來停止這個計數(shù)器：
| 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對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)，并可以實現(xiàn)瀏覽器前進與后退相似導(dǎo)航的功能。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標(biāo)簽頁乃至每個框架，都有自己的history對象與特定的window對象關(guān)聯(lián)。
語法：
window.history.[屬性|方法]
注意：window可以省略。
History對象屬性：
History對象方法：
使用length屬性，當(dāng)前窗口的瀏覽歷史總長度，代碼如下：
| 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()相當(dāng)于go(-1),代碼如下:
| 1 | window.history.go(-1); |
2. 返回下一個瀏覽的頁面
forward()方法，加載 history 列表中的下一個 URL。
如果倒退之后，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:
| 1 | window.history.forward(); |
注意：等價點擊前進按鈕。
forward()相當(dāng)于go(1),代碼如下:
| 1 | window.history.go(1); |
3. 返回瀏覽歷史中的其他頁面
go()方法，根據(jù)當(dāng)前所處的頁面，加載 history 列表中的某個具體的頁面。
語法：
| 1 | window.history.go(number); |
參數(shù)：
瀏覽器中，返回當(dāng)前頁面之前瀏覽過的第二個歷史頁面，代碼如下：
| 1 | window.history.go(-2); |
注意：和在瀏覽器中單擊兩次后退按鈕操作一樣。
同理，返回當(dāng)前頁面之后瀏覽過的第三個歷史頁面，代碼如下：
| 1 | window.history.go(3); |
Location對象
location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。
語法:
location.[屬性|方法]
location對象屬性圖示:
location 對象屬性：
Navigator對象
Navigator 對象包含有關(guān)瀏覽器的信息，通常用于檢測瀏覽器與操作系統(tǒng)的版本。
對象屬性:
查看瀏覽器的名稱和版本，代碼如下:
| 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的內(nèi)核。
使用userAgent判斷使用的是什么瀏覽器(假設(shè)使用的是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>"); } |
運行結(jié)果:
screen對象
screen對象用于獲取用戶的屏幕信息。
語法：
window.screen.屬性
對象屬性:
屏幕分辨率的高和寬
window.screen 對象包含有關(guān)用戶屏幕的信息。
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 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務(wù)欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務(wù)欄。
注意:
不同系統(tǒng)的任務(wù)欄默認(rèn)高度不一樣，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。
我們來獲取屏幕的可用高和寬度，代碼如下：
| 1 2 3 4 | <script?type="text/javascript"> document.write("可用寬度："?+?screen.availWidth); document.write("可用高度："?+?screen.availHeight); </script> |
注意:根據(jù)屏幕的不同顯示值不同
總結(jié)
以上是生活随笔為你收集整理的javascript Windows对象（BOM）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript DOM对象
- 下一篇： HTML标签元素的分类