天天看點
傳回

JavaScript_BOM對象

BOM(浏覽器對象模型)，它可以對浏覽器視窗進行通路和操作，使用BOM，我們可以移動視窗、改變狀态中的文本及執行其他與頁面内容不直接相關的動作。

簡而言之:BOM對象的功能就是使JavaScript有能力與浏覽器’對話’，以便達到我們想要的效果。

一．Window對象

1.簡單說明

所有的浏覽器都支援window對象；

從概念上來講，一個HTML文檔對應一個window對象；

從功能上來說，它可以控制浏覽器的視窗；

從使用上講，window對象不需要建立對象，直接使用即可。

2.window對象方法

2.1.alert():頁面彈框提醒

var s =window.alert("hi");      //傳回結果為undefined,即無傳回值
    console.log('s='+s);

2.2.confirm():頁面彈框讓進行選擇，傳回值為布爾值(選擇'确認",則傳回true;選擇'取消'傳回false)

var res= window.confirm("this is a person ?")
    console.log('res='+res);

2.3.prompt():頁面彈框讓使用者進行輸入，點選'确定'後傳回值為使用者輸入的字元串值,點選'取消'後，傳回值為null

var  name = window.prompt("pelase input your name:");
    console.log('name = '+name);

注意:window對應為全局對象(全局變量、内置對象),是以在使用過程中可以不帶'window.'而直接使用window的所有方法;例如:

var  age = prompt("pelase input your age:");
    console.log('age = '+age);

2.4.open(url)打開一個新的浏覽器視窗或者查找一個一命名的視窗

var s = open("http://www.baidu.com");
   console.log('s='+s);

2.5.close()關閉浏覽器視窗

close();

2.6.setInterval(函數名(不能帶括号,不能帶參數),循環定時器，它是按照指定的周期(機關:毫秒)循環反複地來調用函數或者計算表達式,即:每隔多長時間執行一次函數，若沒有clearInterval來處理則永遠不會停止，永久執行。

例1(在網頁上每隔一秒顯示一次時間):

setInterval(show,1000)
function show(){
var time = new Date();
var showtime = time.toLocaleTimeString();
    document.write("show time:"+showtime+"<br>");
}

例2(頁面上點選輸入框立即顯示目前時間，并每隔1秒中重新整理一次時間；點選’停止’按鈕則停止重新整理頁面時間)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #showtime{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
<script>
    var lock;//定義全局變量(定時器名稱)友善後面的clearInterval()函數使用
    function begin() {
        '點選輸入框就在頁面上顯示目前時間并每秒鐘重新整理一次--定時器功能'
        if(lock==undefined){
            showtime(); //一開始點選就顯示時間(否則會等待1S後才開始顯示)
            lock = setInterval(showtime,1000); //生成一個定時器對象
        }
    }
    function showtime() {
        '頁面上顯示目前時間'
        var time = new Date();
        var nowtime = time.toLocaleString();       // 按字元串格式顯示時間
        var ele = document.getElementById('showtime');      // 得到輸入框的元素
        ele.value = nowtime;    //将目前時間指派給輸入框，使其在頁面上顯示
    }
    function end() {
        '點選停止則停止重新整理頁面時間
        clearInterval(lock);
        lock = undefined;    //重新給定時器指派，否則再次點選輸入框則不再重新整理頁面時間(因為，在前面的begin函數中已經給lock指派了，此時lock不再是undefined了，是以此時必須要重新給lock指派undefined)
    }
</script>
<p><input type="text" id="showtime" onclick="begin()"></p>
<button onclick="end()">停止</button>
</body>
</html>

2.7.clearInterva(定時器名稱):取消由setInterval()設定的timeout

clearInterval(定時器名稱) 注:其中定時器名稱是由setInterval()生成的對象并指派的,它是和setInetrva()結合使用的；例如:

var lock;//定義全局變量(定時器名稱)友善後面的clearInterval()函數使用
function begin() {
    '點選輸入框就在頁面上顯示目前時間并每秒鐘重新整理一次--定時器功能'
    if(lock==undefined){
        showtime(); //一開始點選就顯示時間(否則會等待1S後才開始顯示)
        lock = setInterval(showtime,1000); //生成一個定時器對象
    }
}
clearInterval(lock);

2.8.setTimeout(函數名(不帶括号，不能帶參數),等待時間):在指定的毫秒時間後調用函數或計算表達式,即：按照設定的等待時間執行一次函數。(注意:與setInterval的差別是:setInterval是循環永久的執行函數,而setTimeout是隻執行一次函數)

setTimeout(函數名(不帶括号，不能帶參數),等待時間)，例如:

<script>
    var  showfun = setTimeout(show,3000)    //等待3秒後彈框
    function show() {
        alert("this is a window's alter");
    }
</script>

2.9.clearTimeout(任務器名稱)：取消由setTimeout()設定的timeout

clearTimeout(任務器名稱) 任務器是由setTimeout()函數生成的對象，它是與setTimeout()結合使用的。例如:

<script>
    var  showfun = setTimeout(show,3000)    //等待3秒後彈框
    function show() {
        alert("this is a window's alter");
    }
    clearTimeout(showfun);
</script>

3.window對象的history子對象

history對象包含使用者在浏覽器視窗中通路過的URL；

history對象是window對象的一部分，可以通過window.history屬性對其進行通路。

history對象包含的屬性方法有:

3.1 back（) 加載history清單的前一個URL頁面；

3.2 forward() 加載history清單中的該頁面之後的一個URL頁面；

3.3 go(1或-1) 加載history清單中的具體某一個頁面。

history.go(1) = history.forward()

history.go(-1) = history.back()

代碼執行個體:

js_history1.html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_history1</title>
</head>
<body>
    <!--通過a标簽超連結的方式連接配接到js_history1.html頁面-->
    <p><a rel="nofollow" href="js_history2.html">a:ToHistory2.html</a></p>
    <p onclick="history.forward()"><u>forward:Tohistory1.html</u></p>
    <p>這是html1頁面</p>
</body>
</html>           
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_history2</title>
</head>
<body>
    <!--通過ahistory.back()的方法連接配接到js_history2.html頁面-->
    <p onclick="history.back()"><u>Tohistory1.html</u></p>
    <p onclick="history.go(-1)"><i>點選它也可</i><u>Tohistory1.html</u></p>
    <p>這是html2頁面</p>
</body>
</html>           
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location示範</title>
</head>
<body>
<script>
</script>
<p>location.reload()方法示範</p>
<!--通過 location.assign(url)連接配接到指定的URL頁面-->
<!--<p><button onclick="location.assign('http://www.baidu.com')">assign:連接配接到百度首頁</button></p>-->
<!--通過location.reload()方法重新加載該頁面-->
<P><button onclick="location.reload()">重新整理</button></P>
<!--通過location.replace(newurl)方法連接配接到重新指定的url頁面-->
<button onclick="location.replace('http://www.baidu.com')">replace:連接配接到百度首頁</button>
</body>
</html>
javascript js bom 對象
上一篇: docker中使用gpu（darknet-yolo，tensorflow）
下一篇: 裝elemnetUI中使用者頭像上傳

繼續閱讀