BOM對象_hehe.employment.over.10.2

10.3 BOM_概述

BOM： Browser Object Model 浏覽器對象模型，将浏覽器的各個組成部分封裝成對象。
組成：
- Window：視窗對象
- Navigator：浏覽器對象
- Screen：顯示器螢幕對象
- History：曆史記錄對象
- Location：位址欄對象
  
  BOM對象_hehe.employment.over.10.2

10.4 BOM_Window

1.建立
2.方法
- （1）.與彈出框有關的方法：
  - alert() ：顯示帶有一段消息和一個确認按鈕的警告框。
  - confirm() ：顯示帶有一段消息以及确認按鈕和取消按鈕的對話框。
    - 如果使用者點選确定按鈕，則方法傳回true
    - 如果使用者點選取消按鈕，則方法傳回false
  - prompt() ：顯示可提示使用者輸入的對話框。
    - 傳回值：擷取使用者輸入的值。
- （2）.與打開關閉有關的方法：
  - close() ：關閉浏覽器視窗。誰調用我，我關誰。
  - open() ：打開一個新的浏覽器視窗，傳回新的Window對象。
- （3）.與定時器有關的方式：
  - setTimeout() ：在指定的毫秒數後調用函數或計算表達式。
    - 參數：
      - js代碼或者方法對象
      - 毫秒值
    - 傳回值：唯一辨別，用于取消定時器
  - clearTimeout() ：取消由 setTimeout() 方法設定的 timeout。
  - setInterval() ：按照指定的周期（以毫秒計）來調用函數或計算表達式。
  - clearInterval() ：取消由 setInterval() 設定的 timeout。
3.屬性：
- （1）.擷取其他 BOM對象：
  - history
  - location
  - Navigator
  - Screen:
- （2）.擷取 DOM對象
  - document
4.特點
- Window對象不需要建立可以直接使用 window。 window.方法名();
- window引用可以省略。 方法名();
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window對象</title>
</head>
<body>

    <input id="openBtn" type="button" value="打開視窗">
    <input id="closeBtn" type="button" value="關閉視窗">
<script>
    //警示框
    alert("hello window");
    window.alert("hello a");
    //确認框
    var flag = confirm("您确定要退出嗎？");
    if(flag){
        //退出操作
        alert("歡迎再次光臨！");
    }else{
        //提示：手别抖...
        alert("手别抖...");
    }

    //輸入框
    var result =  prompt("請輸入使用者名");
    alert(result);

    //打開新視窗
    var openBtn = document.getElementById("openBtn");
    var newWindow;
    openBtn.onclick = function(){
        //打開新視窗
        newWindow = open("https://www.baidu.com");
    }
    //關閉新視窗
    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function(){
        // 關閉新視窗
        newWindow.close();
    }

    //一次性定時器
    //setTimeout("alert('boom');",2000);
    //setTimeout("fun();",2000);
    //var id = setTimeout(fun,2000);
    //clearTimeout(id);

     function fun(){
         alert('boom');
     }

     //循環定時器
     var id = setInterval(fun,2000);
     clearInterval(id);

    //擷取history
    var h1 =  window.history;
    var h2 = history;
    alert(h1);
    alert(h2);

    var openBtn = window.document.getElementById("openBtn");
    alert(openBtn);
    /*document.getElementById("");*/
</script>
</body>
</html>

10.5 BOM_Window案例_輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
</head>
<body>
    <img id="img" src="img/banner_1.jpg" width="100%">
<script>
    /*
    分析：
        1.在頁面上使用img标簽展示圖檔
        2.定義一個方法，修改圖檔對象的src屬性
        3.定義一個定時器，每隔3秒調用方法一次。
 */
    //1.修改圖檔src屬性
    var number = 1;
    function fun(){
        number ++;
        //判斷number是否大于3
        if(number > 3){
            number = 1;
        }
        //擷取img對象
        var img = document.getElementById("img");
        img.src = "img/banner_"+number+".jpg";
    }
    //2.定義定時器
    setInterval(fun,3000);
</script>
</body>
</html>

10.6 BOM_Location

Location：位址欄對象
1.建立(擷取)：
- window.location
- location
2.方法：
- reload() :重新加載目前文檔。重新整理。
3.屬性：
- href：設定或傳回完整的 URL。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location對象</title>

</head>
<body>
    <input type="button" id="btn" value="重新整理">
    <input type="button" id="goBaidu" value="百度">
<script>
    //reload方法，定義一個按鈕，點選按鈕，重新整理目前頁面
    //1.擷取按鈕
    var btn = document.getElementById("btn");
    //2.綁定單擊事件
    btn.onclick = function(){
        //3.重新整理頁面
        location.reload();
    }


    //擷取href
    var href = location.href ;
    alert(href);

    //點選按鈕，去通路百度官網
    //1.擷取按鈕
    var goItcast = document.getElementById("goBaidu");
    //2.綁定單擊事件
    goItcast.onclick = function(){
        //3.去通路百度官網
        location.href = "https://www.baidu.com";
    }

</script>
</body>
</html>

10.7 BOM_Location案例_自動跳轉頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動跳轉</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }
    </style>
</head>
<body>
<p>
    <span id="time">5</span>秒之後，自動跳轉到首頁...
</p>
<script>
    /*
        分析：
           1.顯示頁面效果  <p>
           2.倒計時讀秒效果實作
               2.1 定義一個方法，擷取span标簽，修改span标簽體内容，時間
               2.2 定義一個定時器，1秒執行一次該方法
           3.在方法中判斷時間如果<= 0 ，則跳轉到首頁

     */
    // 倒計時讀秒效果實作
    var second = 5;
    var time = document.getElementById("time");

    //3.定義一個方法，擷取span标簽，修改span标簽體内容，時間--
    function showTime(){
        second -- ;
        //判斷時間如果<= 0 ，則跳轉到首頁
        if(second <= 0){
            //跳轉到首頁
            location.href = "https://www.baidu.com";
        }
        time.innerHTML = second +"";
    }
    
    //設定定時器，1秒執行一次該方法
    setInterval(showTime,1000);
    
</script>
</body>
</html>

10.8 BOM_History

History：曆史記錄對象
1.建立(擷取)：
- window.history
- history
2.方法：
- back() ：加載 history 清單中的前一個 URL。
- forward() ：加載 history 清單中的下一個 URL。
- go(參數) ：加載 history 清單中的某個具體頁面。
  - 參數：
    - 正數：前進幾個曆史記錄
    - 負數：後退幾個曆史記錄
3.屬性：
- length：傳回目前視窗曆史清單中的 URL 數量。
  
  示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History對象</title>
</head>
<body>
    <input type="button" id="btn" value="擷取曆史記錄個數">
    <a href="9_History對象_後退.html">第二個頁面</a>
    <input type="button" id="forward" value="前進">
<script>
    //1.擷取按鈕
    var btn = document.getElementById("btn");
    //2.綁定單機事件
    btn.onclick = function(){
        //3.擷取目前視窗曆史記錄個數
        var length = history.length;
        alert(length);
    }
    
    //1.擷取按鈕
    var forward = document.getElementById("forward");
    //2.綁定單機事件
    forward.onclick = function(){
        //前進
        history.forward();
        //history.go(1);
    }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
</head>
<body>
    <img id="img" src="img/banner_1.jpg" width="100%">
    <input type="button" id="back" value="後退">
    <script>
        //修改圖檔src屬性
        var number = 1;
        function fun(){
            number ++ ;
            //判斷number是否大于3
            if(number > 3){
                number = 1;
            }
            //擷取img對象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定義定時器
        setInterval(fun,3000);

        //1.擷取按鈕
        var back = document.getElementById("back");
        //2.綁定單機事件
        back.onclick = function(){
            //後退
           //history.back();
            history.go(-1);
        }
    </script>
</body>
</html>

BOM對象_hehe.employment.over.10.2

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條