## 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编辑  收藏  举报