javaScript高级23_BOM2

一、概念

　Browser Object Model 浏览器对象模型
　将浏览器的各个组成部分封装成对象。

二、对象组成

Navigator：浏览器对象
Window：窗口对象（一个标签页）
Location：地址栏对象
History：历史记录对象
Screen：显示器屏幕对象

三、Window：窗口对象

　1、创建

　2、方法

　　1. 与弹出框有关的方法：

- alert() 显示带有一段消息和一个确认按钮的警告框。
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
  - 如果用户点击确定按钮，则方法返回true
  - 如果用户点击取消按钮，则方法返回false
- prompt() 显示可提示用户输入的对话框。
  - 返回值：获取用户输入的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
    <script>
        window.alert("hello");
        alert("window")

        var flag = confirm("您确定要退出吗？")
        if(flag){
            //退出操作
            alert("欢迎再次光临！");
        }else{
            alert("手别抖...")
        }

        var username = prompt("请输入用户名");
        alert(username);

    </script>
</head>
<body>

</body>
</html>

　　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 () {
        //打开新窗口
        // open();//打开一个空的新窗口
        newWindow = open("https://www.baidu.com");//打开一个窗口并浏览baidu
    }
    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        //打开新窗口
        newWindow.close();
    }
</script>
</body>
</html>

　点击“打开窗口”按钮

　点击“关闭窗口”按钮

　　3. 与定时器有关的方式

- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
  - 参数：

　　　　　　　　　　1. js代码或者方法对象
　　　　　　　　　　2. 毫秒值

- - 返回值：唯一标识，用于取消定时器
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。

<!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>
    //一次性定时器
    setTimeout("fun()",3000);
    var id = setTimeout(fun,3000);
　　 //取消定时器
    clearTimeout(id);
    function fun() {
        alert('boom~~~')
    }
    //循环定时器
    var id2 = setInterval(fun,2000);
    clearInterval(id2);
</script>
</body>
</html>

　　4. 案例：轮播图

　　　共3张图片：banner_1.jpg、banner_2.jpg、banner_3.jpg，每隔3秒换一张图片，第3张图片播放完后继续从第1张图片开始播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="banner" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。
        */
        var num = 1;
        function changeSrc() {
            num++;
            //判断num是否大于3
            if(num > 3){
                num = 1;
            }
            var banner = document.getElementById("banner");
            banner.src="img/banner_"+num+".jpg";
        }

        //2. 定义定时器
        setInterval(changeSrc,3000);
    </script>
</body>
</html>

　3、属性

　　1. 获取其他BOM对象：

- history：返回窗口的 History 对象。
- location：返回窗口的 Location 对象。
- Navigator：返回窗口的 Navigator 对象。
- Screen：返回窗口的 Screen 对象。

　　2. 获取DOM对象

- document：返回窗口的 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>
    var h1 = window.history;
    var h2 = history;
    alert(h1);
    alert(h2);//跟h1一样

    var openbtn = window.document.getElementById("openBtn");
    alert(openbtn);//[object HTMLInputElement]
    document.getElementById("openBtn");
</script>
</body>
</html>

四、Location：地址栏对象

　1、创建(获取)：
　　　　1. window.location
　　　　2. location-推荐

　2、方法：
　　　　reload() 重新加载当前文档。刷新
　3、属性
　　　　href 设置或返回完整的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
    <input id="btn" type="button" value="刷新">
    <script>
        //reload方法，定义一个按钮，点击按钮刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单机事件
        btn.onclick = function () {
            //3.刷新页面
            location.reload();
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
    <input id="gobd" type="button" value="去百度">
    <script>
        //获取href
        var href = location.href;
        alert(href);
        //点击按钮，去访问www.baidu.com
        //1.获取按钮
        var gobd = document.getElementById("gobd");
        //2.绑定单机事件
        gobd.onclick = function(){
            //3. 去访问www.baidu.com
            location.href = "https://www.baidu.com";//当前页面访问baidu
        }
    </script>
</body>
</html>

　4、案例：自动跳转首页

　　5秒之后，自动跳转首页，5秒倒计时，显示0秒之后就跳转到百度

<!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. 倒计时读秒实现
                        定时器
                         2.1 定义一个方法，获取span标签，修改span标签体的内容，时间--
                         2.2 定义一个定时器，1秒执行一次该方法
                3. 在方法中判断时间如果<=0，则跳转到首页
         */
        var second = 5;
        var time = document.getElementById("time");
        function showTime() {
            second -- ;
            if(second<=0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second+"";
        }
        //设置定时器，1秒执行一次该方法
        setInterval(showTime,1000);
    </script>
</body>
</html>

五、History：历史记录对象

　当前用户在当前浏览器窗口中访问过的URL。

　1、创建(获取)：
　　　　1. window.history
　　　　2. 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="获取历史纪录个数">
<script>
    //获取按钮
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //3.获取当前窗口历史纪录个数
        var len = history.length;
        alert(len);//1
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象2-轮播图</title>
</head>
<body>
    <img id="banner" src="img/banner_1.jpg" width="100%">
    <input type="button" id="back" value="后退">

    <script>
        var num = 1;
        function changeSrc() {
            num++;
            //判断num是否大于3
            if(num > 3){
                num = 1;
            }
            var banner = document.getElementById("banner");
            banner.src="img/banner_"+num+".jpg";
        }

        //2. 定义定时器
        setInterval(changeSrc,3000);

        //1.获取按钮
        var back = document.getElementById("back");
        //2.绑定单机事件
        back.onclick = function () {
            //3.后退
            // history.back();
            history.go(-1);//效果跟back一样
        }
    </script>
</body>
</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>//1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function () {
        //3.前进
        // history.forward();
        history.go(1);//效果跟forward一样
    }
</script>
</body>
</html>

　点击“09页面”链接到另外一个地址

　点击“后退”按钮回到History对象页，首页点击“前进”按钮回到History对象2页。

posted on 2024-06-04 17:33 花溪月影阅读(3) 评论(0) 编辑收藏举报