天天看點
傳回

js進階-BOM（二）

BOM:

一、概念：

Browser Object Model 浏覽器對象模型 ：将浏覽器的各個組成部分封裝成對象。

二、組成：

  • Window：視窗對象
  • Navigator：浏覽器對象（x）
  • Screen：顯示器螢幕對象（x）
  • History：曆史記錄對象
  • Location：位址欄對象

三、Window：視窗對象

3.1 方法

1）與彈出框有關的方法：

​ alert() 顯示帶有一段消息和一個确認按鈕的警告框。

​ confirm() 顯示帶有一段消息以及确認按鈕和取消按鈕的對話框。(用的多)

​ · 如果使用者點選确定按鈕，則方法傳回true

​ · 如果使用者點選取消按鈕，則方法傳回false

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

</head>
<body>
	<script>
	//确認框
         var flag = confirm("您确定要退出嗎？");
         if(flag){
             //退出操作 确定為true
             alert("歡迎再次光臨！");
         }else{
             alert("手别抖...");
         }
   </script>
</body>
</html>

prompt() 顯示可提示使用者輸入的對話框。

傳回值：擷取使用者輸入的值

//輸入框
var result =  prompt("請輸入使用者名");
alert(result);
js進階-BOM（二）

2）與打開關閉有關的方法：

​ close() 關閉浏覽器視窗。誰調用我 ，我關誰

​ open() 打開一個新的浏覽器視窗，傳回新的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>
    //打開新視窗
        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();
        }
   </script>
</body>
</html>

3) 與定時器有關的方式

​setTimeout() :在指定的毫秒數後調用函數或計算表達式隻執行一次。參數： js代碼或者方法對象/毫秒值

​ 傳回值：唯一辨別，用于取消定時器

<body>
	<script>
	//一次性定時器，延遲2秒執行  boom~~
     setTimeout("fun();",2000);
     //setTimeout(fun,2000);
     function fun(){
            alert('boom~~');
        }
	 </script>
</body>

clearTimeout() 取消由 setTimeout() 方法設定的 timeout。

var id = setTimeout(fun,2000);
//取消一次性定時器
clearTimeout(id);
function fun(){
    alert('boom~~');
}

setInterval() （循環）按照指定的周期（以毫秒計）來調用函數或計算表達式。

<body>
	<script>
		function fun(){
    	alert('boom~~');
		}
		setInterval(fun,2000);
  </script>
</body>

clearInterval() 取消由 setInterval() 設定的 timeout。

<body>
	<script>
		function fun(){
    		alert('boom~~');
			}
		//循環定時器
		var id =setInterval(fun,2000);
    //取消循環定時器
		clearInterval(id);
  </script>
</body>

圖檔輪播的案例 

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

        //2.定義循環定時器
        setInterval(fun,1000);
    </script>
</body>
</html>

3.2 屬性

3.2.1 擷取其他BOM對象：

​ history

var h1 =  window.history;
var h2 = history;

​ location

​Navigator

​Screen

3.2.2 擷取DOM對象:document 

<body>
	<input id="openBtn" type="button" value="打開視窗">
	<script>
		var openBtn = window.document.getElementById("openBtn");
    alert(openBtn);
	</script>
</body>

3.2.3 特點

​ Window對象不需要建立可以直接使用 window使用。 window.方法名();

​ window引用可以省略。 方法名();

四、Location：

位址欄對象，包含目前有關的URL資訊

4.1 建立(擷取)：

  • window.location
  • location

4.2 方法：

  • reload() 重新加載目前文檔。重新整理

4.3 屬性：

  • href 設定或傳回完整的 URL。可用作跳轉url 
<script>
	//擷取href
 	var href = location.href ;
 	alert(href);
</script>

重新整理、在目前頁面跳轉頁面 demo： 

<!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="goBoke" value="去隻要不兔的部落格">
    <script>
        //reload方法，定義一個按鈕，點選按鈕，重新整理目前頁面
        //1.擷取按鈕
        var btn = document.getElementById("btn");
        //2.綁定單擊事件
        btn.onclick = function(){
            //3.重新整理頁面
            location.reload();
        }

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

        //點選按鈕，去通路www.cnblogs.com/nanao/官網
        //1.擷取按鈕
        var goBoke = document.getElementById("goBoke");
        //2.綁定單擊事件
        goBoke.onclick = function(){
            //3.去通路隻要不兔的部落格
            location.href = "https://www.cnblogs.com/nanao/";
        }
    </script>
</body>
</html>

實作自動跳轉demo（html+css+js） 

<!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 ，則跳轉到首頁

         */
       // 2.倒計時讀秒效果實作

        var second = 5;
        var time = document.getElementById("time");

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

五、History：曆史記錄對象

5.1 建立(擷取)：

  • window.history
  • history

5.2 方法：

  • back() 加載 history 清單中的前一個 URL。
  • rward() 加載 history 清單中的下一個 URL。

  • go(參數) 加載 history 清單中的某個具體頁面。

    參數：正數：前進幾個曆史記錄

    負數：後退幾個曆史記錄

5.3 屬性：

案例： 

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

    <input type="button" id="btn" value="擷取曆史記錄個數">
    <a href="09_History對象2.html">09頁面</a>
    <input type="button" id="forward" value="前進">
<script>
//length傳回目前視窗曆史清單中的 URL 數量。
    //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/abanner_1.jpeg" width="50%" >
    <input type="button" id="back" value="後退">
    <script>
        /*
            分析：
                1.在頁面上使用img标簽展示圖檔
                2.定義一個方法，修改圖檔對象的src屬性
                3.定義一個定時器，每隔3秒調用方法一次。

         */
        //修改圖檔src屬性
        var number = 1;
        function fun(){
            number ++ ;
            //判斷number是否大于3
            if(number > 3){
                number = 1;
            }
            //擷取img對象
            var img = document.getElementById("img");
            img.src = "img/abanner_"+number+".jpeg";
        }

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

        //1.擷取按鈕
        var back = document.getElementById("back");
        //2.綁定單機事件
        back.onclick = function(){
            //後退
           // history.back();
            history.go(-1);
        }
    </script>
</body>
</html>
html 曆史記錄 新視窗 加載 Window對象
上一篇: js-BOM操作
下一篇: JS BOM簡列

繼續閱讀