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);

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 属性：

length 返回当前窗口历史列表中的 URL 数量。

案例：

新建一个html

<!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>

新建一个09_History对象2.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>

posted @ 2021-09-16 21:06 只要不兔的学习笔记阅读(53) 评论(0) 收藏举报

刷新页面返回顶部

只要不兔

路漫漫其修远兮~