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