JavaScript----BOM

## BOM

　　1、概念：Browser Object Model 浏览器对象模型

　　　　* 将浏览器组成的对象封装成BOM

　　2、组成：

　　　　* Window：窗口对象

　　　　* Navigator：浏览器对象

　　　　* Screen：显示器屏幕对象

　　　　* History：历史记录对象

　　　　* Location：地址栏对象

　　3、Window：窗口对象

<script>
        /*
        Window：窗口对象
            1、创建
            2、方法
                1、与弹出框有关的方法：
                    alert()    显示带有一段消息和一个确认按钮的警告框。
                    confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
                        * 如果用户点击确定按钮，方法返回true
                        * 如果用户点击取消按钮，方法返回false
                    prompt()    显示可提示用户输入的对话框。
                        *  返回值：用户输入的值。
                2、与打开关闭有关的方法：
                    open()    打开一个新的浏览器窗口或查找一个已命名的窗口。
                        *  返回一个新的window对象
                    close()    关闭浏览器窗口。
                        *  谁调用我，我关闭谁
                3、与定时器有关的方法：
                    setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                        *  参数：
                            1、js代码或者方法对象
                            2、毫秒值
                        *  返回值：唯一标识，用于取消定时器
                    clearTimeout()    取消由 setTimeout() 方法设置的 timeout。
                    setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。
                    clearInterval()    取消由 setInterval() 设置的 timeout。
            3、属性
                1、获取其他BOM对象：
                    history
                    location
                    Navigator
                    Screen
                2、获取DOM对象
                    document
            4、特点
                * Window对象不需要创建可以直接使用 window使用。 window.方法名();
                *  window引用可以省略。  方法名();
        */
        /*alert("hello window");*/

        /*confirm("您确定要退出吗？");*/

        //一次性定时器
        /*setTimeout("alert('111')",3000);
        setTimeout(function () {
            alert("boom!!");
        },1000)*/
        //循环定时器
        /*var interval = setInterval(function () {
            alert("炸啦!");
        },2000);
        //取消循环定时器
        clearInterval(interval);*/

        //获取history
        var h2 = history;//var h1 = window.history;
    </script>

轮播图案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script>
        window.onload = function () {
            //修改图片src属性
            var num = 1;
            function fun() {
                num++;
                if (num > 3){
                    num = 1;
                }
                //获取id对象能在图片加载前完成，因为定义在方法中，方法需要三秒之后执行
                var img = document.getElementById("img");
                img.src = "imgs/banner_"+num+".jpg";
            }
            setInterval(fun,3000);
        }
    </script>
</head>
<body>
<img id="img" src="imgs/banner_1.jpg" width="100%">
</body>
</html>

　　4、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>
    <script>
        // reload方法，定义一个按钮，点击按钮刷新页面
        window.onload = function () {
            var btn = document.getElementById("btn");
            var bd = document.getElementById("bd");
            btn.onclick = function () {
                location.reload();
            }
            var href = location.href;
            //alert(href);
            bd.onclick = function () {
                location.href = "https://www.baidu.com";
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="bd" value="百度一下">
</body>
</html>

跳转首页案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转首页案例</title>
    <style>
        p {
            text-align: center;
        }

        span {
            color: red;
        }
    </style>
    <script>
        window.onload = function () {
            var second = 5;
            var time = document.getElementById("time");
            setInterval(function () {
                second--;
                if (second <= 0){
                    location.href = "https://www.baidu.com";
                }
                time.innerHTML = second;
            }, 1000);
        }
    </script>
</head>
<body>
<p>
    <span id="time">5</span>秒之后，自动跳转到首页...
</p>
</body>
</html>

4、History：历史记录对象

　　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>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                var length = history.length;
                alert(length);
            }

            var forward = document.getElementById("forward");
            forward.onclick = function () {
                history.go(1);//history.forward();
            }

        }
    </script>
</head>
<body>
<input id="btn" type="button" value="获取历史记录个数">
<a href="轮播图.html">轮播图页面</a>
<input id="forward" type="button" value="前进">
</body>
</html>

Posted on 2020-02-18 10:49 夏洛蒂的手稿阅读(148) 评论(0) 编辑收藏举报

刷新页面返回顶部