国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術(shù)文章
文章詳情頁

JS瀏覽器BOM常見操作實例詳解

瀏覽:103日期:2024-05-11 15:18:53

本文實例講述了JS瀏覽器BOM常見操作。分享給大家供大家參考,具體如下:

window尺寸

有三種方法能夠確定瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)。

對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 瀏覽器窗口的內(nèi)部高度 window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

對于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight document.documentElement.clientWidth

或者

document.documentElement.clientHeight document.documentElement.clientWidth

實用的 JavaScript 方案(涵蓋所有瀏覽器):

<script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById('demo'); x.innerHTML='瀏覽器window寬度: ' + w + ', 高度: ' + h + '。' </script>

其他 Window 方法

window.open() - 打開新窗口 window.close() - 關(guān)閉當(dāng)前窗口 window.moveTo() - 移動當(dāng)前窗口 window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸 Window Screen

window.screen對象在編寫時可以不使用 window 這個前綴。

screen.availWidth - 可用的屏幕寬度 screen.availHeight - 可用的屏幕高度

Window Screen 可用寬度

screen.availWidth 屬性返回訪問者屏幕的寬度,以像素計,減去界面特性,比如窗口任務(wù)欄。

Window Screen 可用高度

screen.availHeight 屬性返回訪問者屏幕的高度,以像素計,減去界面特性,比如窗口任務(wù)欄。

Window Location

location.hostname 返回 web 主機(jī)的域名 location.pathname 返回當(dāng)前頁面的路徑和文件名 location.port 返回 web 主機(jī)的端口 (80 或 443) location.protocol 返回所使用的 web 協(xié)議(http:// 或 https://) location.href 屬性返回當(dāng)前頁面的 URL。 location.pathname 屬性返回 URL 的路徑名。 location.assign() 方法加載新的文檔。 Window History

history.back() - 與在瀏覽器點擊后退按鈕相同 history.forward() - 與在瀏覽器中點擊按鈕向前相同 JavaScript Navigator

window.navigator 對象包含有關(guān)訪問者瀏覽器的信息。

警告!!!

來自 navigator 對象的信息具有誤導(dǎo)性,不應(yīng)該被用于檢測瀏覽器版本,這是因為:

navigator 數(shù)據(jù)可被瀏覽器使用者更改

一些瀏覽器對測試站點會識別錯誤

瀏覽器無法報告晚于瀏覽器發(fā)布的新操作系統(tǒng)

JavaScript 彈窗

可以在 JavaScript 中創(chuàng)建三種消息框:警告框、確認(rèn)框、提示框。

警告框

警告框經(jīng)常用于確保用戶可以得到某些信息。

當(dāng)警告框出現(xiàn)后,用戶需要點擊確定按鈕才能繼續(xù)進(jìn)行操作。

語法

window.alert('sometext');

window.alert() 方法可以不帶上window對象,直接使用alert()方法。

確認(rèn)框

確認(rèn)框通常用于驗證是否接受用戶操作。

當(dāng)確認(rèn)卡彈出時,用戶可以點擊 '確認(rèn)' 或者 '取消' 來確定用戶操作。

當(dāng)你點擊 '確認(rèn)', 確認(rèn)框返回 true, 如果點擊 '取消', 確認(rèn)框返回 false。

語法

window.confirm('sometext');

window.confirm() 方法可以不帶上window對象,直接使用confirm()方法。

提示框

提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個值。

當(dāng)提示框出現(xiàn)后,用戶需要輸入某個值,然后點擊確認(rèn)或取消按鈕才能繼續(xù)操縱。

如果用戶點擊確認(rèn),那么返回值為輸入的值。如果用戶點擊取消,那么返回值為 null。

語法

window.prompt('sometext','defaultvalue');

window.prompt() 方法可以不帶上window對象,直接使用prompt()方法。

換行

彈窗使用 反斜杠 + 'n'(n) 來設(shè)置換行。

JavaScript 計時事件

通過使用 JavaScript,我們有能力作到在一個設(shè)定的時間間隔之后來執(zhí)行代碼,而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計時事件。

在 JavaScritp 中使用計時事件是很容易的,兩個關(guān)鍵方法是:

setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。 setTimeout() - 暫停指定的毫秒數(shù)后執(zhí)行指定的代碼

Note: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。

setInterval() 方法

setInterval() 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼

語法

window.setInterval('javascript function',milliseconds);

window.setInterval() 方法可以不使用window前綴,直接使用函數(shù)setInterval()

setInterval() 第一個參數(shù)是函數(shù)(function)。第二個參數(shù)間隔的毫秒數(shù)

如何停止執(zhí)行?

clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。

語法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前綴,直接使用函數(shù)clearInterval()

要使用 clearInterval() 方法, 在創(chuàng)建計時方法時你必須使用全局變量:

myVar=setInterval('javascript function',milliseconds);

然后可以使用clearInterval() 方法來停止執(zhí)行。

setTimeout() 方法語法

window.setTimeout('javascript 函數(shù)',毫秒數(shù));

setTimeout() 方法會返回某個值。在上面的語句中,值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout(),你可以使用這個變量名來指定它。

setTimeout() 的第一個參數(shù)是含有 JavaScript 語句的字符串。這個語句可能諸如 'alert(’5 seconds!’)',或者對函數(shù)的調(diào)用,諸如 alertMsg()'。

第二個參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第一個參數(shù)。

如何停止執(zhí)行?

clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。

語法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前綴。

要使用clearTimeout() 方法, 你必須在創(chuàng)建超時方法中(setTimeout)使用全局變量:

myVar=setTimeout('javascript function',milliseconds);

如果函數(shù)還未被執(zhí)行,你可以使用 clearTimeout() 方法來停止執(zhí)行函數(shù)代碼。

JavaScript Cookies

Cookies 用于存儲 web 頁面的用戶信息。

什么是 Cookies?

Cookies 是一些數(shù)據(jù), 存儲于你電腦上的文本文件中。

當(dāng) web 服務(wù)器向瀏覽器發(fā)送 web 頁面時,在連接關(guān)閉后,服務(wù)端不會記錄用戶的信息。

Cookies 的作用就是用于解決 '如何記錄客戶端的用戶信息':

當(dāng)用戶訪問 web 頁面時,他的名字可以記錄在 cookie 中。

在用戶下一次訪問該頁面時,可以在 cookie 中讀取用戶訪問記錄。

Cookies 以名/值對形式存儲,如下所示:

username=John Doe

當(dāng)瀏覽器從服務(wù)器上請求 web 頁面時, 屬于該頁面的 cookies 會被添加到該請求中。服務(wù)端通過這種方式來獲取用戶的信息。

使用 JavaScript 創(chuàng)建Cookie

JavaScript 可以使用 document.cookie 屬性來創(chuàng)建 、讀取、及刪除 cookies。

JavaScript 中,創(chuàng)建 cookie 如下所示:

document.cookie='username=John Doe';

還可以為 cookie 添加一個過期時間(以 UTC 或 GMT 時間)。默認(rèn)情況下,cookie 在瀏覽器關(guān)閉時刪除:

document.cookie='username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT';

可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認(rèn)情況下,cookie 屬于當(dāng)前頁面。

document.cookie='username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/';使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來讀取 cookies:

var x = document.cookie; document.cookie 將以字符串的方式返回所有的 cookies,類型格式: cookie1=value; cookie2=value; cookie3=value; 使用 JavaScript 修改 Cookie

在 JavaScript 中,修改 cookies 類似于創(chuàng)建 cookies,如下所示:

document.cookie='username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/';

舊的 cookie 將被覆蓋。

使用 JavaScript 刪除 Cookie

刪除 cookie 非常簡單。您只需要設(shè)置 expires 參數(shù)為以前的時間即可,如下所示,設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

注意,當(dāng)您刪除時不必指定 cookie 的值。

設(shè)置 cookie 值的函數(shù)

首先,我們創(chuàng)建一個函數(shù)用于存儲訪問者的名字:

//cookie 的名稱為 cname,cookie 的值為 cvalue,并設(shè)置了 cookie 的過期時間 expires。 function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = 'expires='+d.toGMTString(); document.cookie = cname + '=' + cvalue + '; ' + expires; } 獲取 cookie 值的函數(shù)

然后,我們創(chuàng)建一個函數(shù)用戶返回指定 cookie 的值:

function getCookie(cname) { var name = cname + '=';//創(chuàng)建一個文本變量用于檢索指定 cookie :cname + '='。 var ca = document.cookie.split(’;’);//使用分號來分割 document.cookie 字符串,并將分割后的字符串?dāng)?shù)組賦值給 ca (ca = document.cookie.split(’;’))。 //循環(huán) ca 數(shù)組 (i=0;i<ca.length;i++),然后讀取數(shù)組中的每個值,并去除前后空格 (c=ca[i].trim())。 for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length);//如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。 } return '';//如果沒有找到 cookie, 返回 ''。 } 檢測 cookie 值的函數(shù)

最后,我們可以創(chuàng)建一個檢測 cookie 是否創(chuàng)建的函數(shù)。

如果設(shè)置了 cookie,將顯示一個問候信息。

如果沒有設(shè)置 cookie,將會顯示一個彈窗用于詢問訪問者的名字,并調(diào)用 setCookie 函數(shù)將訪問者的名字存儲 365 天:

function checkCookie() { var username=getCookie('username'); if (username!='') { alert('Welcome again ' + username); } else { username = prompt('Please enter your name:',''); if (username!='' && username!=null) { setCookie('username',username,365); } } }

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 日韩一区二区在线免费观看 | 国产精品久久自在自线观看 | 欧美黄视频在线观看 | 国产美女作爱视频 | 黑人一级片 | 亚洲不卡在线 | 久久99久久99精品观看 | 91精品福利手机国产在线 | 视频一区视频二区在线观看 | 一级毛片免费视频观看 | 欧美一级毛片免费播放aa | 九九免费精品视频在这里 | 美女被免费网站在线软件 | 精品国产中文一级毛片在线看 | 香蕉97碰碰视频免费 | 国产观看在线 | 成 人 a v免费视频 | 真人一级毛片全部免 | 日韩 欧美 中文 亚洲 高清 在线 | 免费观看欧美性一级 | 高清三级毛片 | 美女很黄很黄免费 | 亚洲天堂美女视频 | freesexvideo性欧美tv2021 | 欧美一级在线全免费 | 真实国产普通话对白乱子子伦视频 | 欧美高清一级毛片免费视 | 久久久久久久久久久久久久久久久 | 国产成人18黄网站免费网站 | 久久精品视频免费 | 俄罗斯一级黄色片 | 日韩欧美精品综合一区二区三区 | 天堂素人搭讪系列嫩模在线观看 | 亚洲男人的天堂在线 | 国产欧美在线播放 | 黄色亚洲网站 | 日韩在线播放中文字幕 | 国产精品日韩欧美一区二区 | 成人看片黄a免费 | 国内精品久久久久影院免费 | 免费国产成人高清无线看软件 |