赵新宇_2021.1.14 赵新宇

学员日志 648 4年前 0 云创动力

一、知识点总结

BOM编程：BOM（Browser Object Model，简称BOM），是浏览器的内置对象管理模型。

在前端页面开发时，可以通过对浏览器的内置对象进行控制，提高Html页面的动态效果，增强用户对页面文件的体验。
分为以下三个对象：

窗口对象：window

地址栏对象：location

历史记录对象：history

window对象：open（）打开一个新窗口，resizeTo将窗口大小改为指定的宽度和高度，moveBy（）指相对原来的窗口移动指定的x，y的值。

注意：使用window对象的任何属性与方法都可以省略。

例如网页时钟：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">

    <title>Date</title>

</head>

<body>

    <p id="timer"></p>

    <hr />

    <button onclick="start()" >开始</button>

    <button onclick="pause()" >暂停</button>

    <script type="text/javascript">

        // 定时任务变量

        var timer ;

        // 获取当前时间对象

        function start(){

            // 如果已经开始了,先清除之前的

            clearInterval(timer);

            // 创建定时任务

            timer = setInterval(time,1000);

        }

        function time(){

            var date = new Date();

            var str = date.toLocaleString();

            var p = document.querySelector("#timer");

            p.innerText = str;

        }

        function pause(){

            clearInterval(timer);

        }

    </script>

</body>

</html>

使用如上代码，可以实现时间的开始与暂停。

location对象：常见的属性方法有：

href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符。

reload方法：刷新当前页面。
history对象：

forward(): 前进到下一页；

back(): 后退上一页；

go(): 跳转到某页（正整数：前进负整数：后退）。

练习代码如下：
```
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">

    <title>跳转页面</title>

    <style type="text/css">

        a{

            text-decoration: none;

        }

        p{

            text-align: center;

            font-size: 24px;

            letter-spacing: 5px;

        }

        span{

            font-size: 28px;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <p><span id="num">4</span>秒后跳转到<a href="08.html" id="a">01</a>页面,或者直接点击<a href="08.html">此处</a>跳转</p>

    <script type="text/javascript">

        //先取得数字

        var num = document.querySelector("#num");

        //每一秒减1

        setInterval(Sub,1000);

        function Sub(){

            var cur = num.innerText - 1;

            if(cur == 0){

                //跳转 document.querySelector("#a").href

                location.href = "08.html";

            }

            num.innerText = cur             

        }

    </script>

</body>

</html>
```
以上代码可以实现n秒后跳转到指定的页面中，

二、心得体会

在今天的学习中，最令我影响深刻的是，在老师看来我们很容易可以敲的代码，给足了时间我们还是不会，纠其原因是因为练的太少，很多js方法的语句没有一点感觉，不知道从何下手，只能在里面敲上css ，在里面敲上基本的

和

一、知识点总结

练习代码如下：

二、心得体会