Js BOM

🍹 浏览器对象模型是用于与浏览器进行交互的接口，包括操作浏览器窗口、导航等功能，提供了对浏览器环境的访问。

1 BOM

  • BOM
    • 浏览器对象模型，即Browser Object Model(BOM)，尚无正式标准。
    • BOM可通过JavaScript来操作浏览器，提供了一组对象用来完成操作。
      • Screen：用于获取用户显示器的相关信息。
      • History：操作历史记录，由于隐私只能前后翻页且仅当次访问有效。
      • Window：代表的是整个浏览器的窗口，同时也是网页中的全局对象。
      • Location：获取当前浏览器的地址栏信息，或者操作浏览器跳转页面。
      • Navigator：代表当前浏览器信息，通过该对象可以识别不同的浏览器。
    • 这些BOM对象在浏览器中作为Window对象的属性保存，可直接使用或通过Window对象使用。

2 Screen

  • Screen
    • Screen包含客户端显示屏幕的信息，所有浏览器都支持。
    • 每个Window对象的screen属性都引用了一个Screen对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Screen</title>
</head>

<body style="text-align: center"><br>
    <!-- JavaScript由上到下执行 -->
    <script>
        // 返回目标设备或缓冲器上调色板的比特深度
        console.log(screen.colorDepth);
        // 返回显示屏幕的颜色分辨率，单位为比特每像素
        console.log(screen.pixelDepth);

        // 返回显示屏幕的高度
        console.log(screen.height);
        // 返回显示器屏幕的宽度
        console.log(screen.width);
        // 返回显示屏幕的宽度，除Windows任务栏外
        console.log(screen.availWidth);
        // 返回显示屏幕的高度，除Windows任务栏外
        console.log(screen.availHeight);

        // 返回调色板的比特深度
        console.log(screen.bufferDepth);

        // 返回显示屏幕的每英寸水平点数
        console.log(screen.deviceXDPI);
        // 返回显示屏幕的每英寸垂直点数
        console.log(screen.deviceYDPI);

        // 设置或返回屏幕的刷新率
        console.log(screen.updateInterval);

        // 返回显示屏幕每英寸水平方向的常规点数
        console.log(screen.logicalXDPI);
        // 返回显示屏幕每英寸垂直方向的常规点数
        console.log(screen.logicalYDPI);

        // 返回用户是否在显示控制面板中启用了字体平滑
        console.log(screen.fontSmoothingEnabled);
    </script>
</body>

</html>

3 History

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>History</title>
</head>

<body style="text-align: center"><br>
    <!-- JavaScript由上到下执行 -->
    <script>
        // 常用属性
        // 获取当前访问的链接数量
        console.log(history.length);
        // history对象
        console.log(history);

        // 常用方法
        // 跳转到下一个页面，作用和浏览器的前进按钮一样
        history.forward();

        // 1 >>> 向前跳转一个页面，相当于forward()
        // 2 >>> 向前跳转两个页面
        // -1 >>> 向后跳转一个页面，相当于back()
        // -2 >>> 向后跳转两个页面
        history.go(-2);

        // 回退到上一个页面，作用和浏览器的回退按钮一样
        history.back();
    </script>
</body>

</html>

4 Window

  • Window
    • JavaScript有三种类型弹出框：警告框、确认框、提示框。
      • 警告框：确保信息传递给用户，通常会使用警告框。
      • 确认框：希望用户验证或接受某事务，使用确认框。
      • 提示框：希望用户进入页面前输入值，使用提示框。
    • 定时事件
      • setTimeout()：指延迟后执行一次操作。
      • setInterval()：用来定期重复执行操作。

4-1 警告框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>警告框</title>
</head>

<body style="text-align: center">
    <!-- JavaScript由上到下执行 -->
    <script>
        window.alert("我是一个警告框！");
    </script>
</body>

</html>

4-2 确认框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>确认框</title>
</head>

<body style="text-align: center">
    <!-- JavaScript由上到下执行 -->
    <script>
        window.confirm("我是一个确认框！");
        var x = confirm("请点击一下按钮！");
        if (x == true) {
            // 确认返回true
            y = "点击了确认按钮！";
        } else {
            // 取消返回false
            y = "点击了取消按钮！";
        }
        console.log(y);
    </script>
</body>

</html>

4-3 提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>提示框</title>
</head>

<body style="text-align: center">
    <!-- JavaScript由上到下执行 -->
    <script>
        window.prompt("我是一个提示框！");
        var person = confirm("请输入您姓名！", "史迪仔");
        if (person != null) {
            console.log(person);
        }
    </script>
</body>

</html>

4-4 延时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>延时器</title>
</head>

<body style="text-align: center">
    <button id="btn">按钮</button>
    <!-- JavaScript由上到下执行 -->
    <script>
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            // 创建延时器，window.setTimeout(function, milliseconds);
            var timer = setTimeout(function () {
                console.log("Hi~");
            }, 3000);
        }

        // 清除延时器
        // clearTimeout(timer);
    </script>
</body>

</html>

4-5 定时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>定时器</title>
</head>

<body style="text-align: center">
    <button id="btn">按钮</button>
    <!-- JavaScript由上到下执行 -->
    <script>
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            // 创建定时器，window.setInterval(function, milliseconds);
            var timer = setInterval(function () {
                console.log("Hi~");
            }, 3000);
        }

        // 清除定时器
        // clearInterval(timer);
    </script>
</body>

</html>

4-6 窗口属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>窗口属性</title>
</head>

<body style="text-align: center">
    <!-- JavaScript由上到下执行 -->
    <script>
        // window.innerWidth：浏览器窗口的内宽度，以像素计
        // IE5~IE8：document.documentElement.clientWidth
        // IE5~IE8：document.body.clientWidth
        var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

        // document.documentElement.clientHeight：浏览器窗口的内高度
        var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

        console.log(w);
        console.log(h);
    </script>
</body>

</html>

4-7 窗口方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>窗口方法</title>
</head>

<body style="text-align: center"><br>
    <button onclick="openWin()">打开窗口</button><br><br>
    <button onclick="moveWin()">移动窗口</button><br><br>
    <button onclick="resizeWin()">调整窗口</button><br><br>
    <button onclick="closeWin()">关闭窗口</button>
    <!-- JavaScript由上到下执行 -->
    <script>
        function openWin() {
            myWindow = window.open("", "", "width=200, height=100");
            myWindow.document.write("<p>新建窗口</p>");
        }
        function moveWin() {
            myWindow.moveTo(300, 300);
            myWindow.focus();
        }
        function resizeWin() {
            myWindow.resizeTo(600, 600);
            myWindow.focus();
        }
        function closeWin() {
            myWindow.close();
        }
    </script>
</body>

</html>

5 Location

  • Location
    • Location对象中封装了浏览器的地址栏信息。
    • 直接打印Location，则可获取到地址栏信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Location</title>
</head>

<body style="text-align: center"><br>
    <!-- JavaScript由上到下执行 -->
    <script>
        // 常用属性
        // 当前地址的来源
        console.log(location.origin);
        // 当前地址的协议
        console.log(location.protocol);
        // 当前地址的主机名
        console.log(location.hostname);
        // 当前地址的主机
        console.log(location.host);
        // 当前地址的端口号
        console.log(location.port);
        // 当前地址?后的参数部分
        console.log(location.search);
        // 当前地址的路径部分
        console.log(location.pathname);
        // 当前全路径地址
        console.log(location.href);
        // location对象
        console.log(location);

        // 修改地址，打开直接跳转地址
        // location = "https://www.baidu.com";
        // location.href = "https://www.baidu.com";

        // 常用方法
        // 跳转到其他页面，作用和直接修改location一样
        // location.assign("https://www.baidu.com");

        // 重新加载当前页面，传递参数true会强制清空缓存刷新页面
        // 打开页面将一直刷新
        // location.reload(true);
        
        // 使用新页面替换当前页面，调用完也会跳转页面
        // 不会生成历史记录，不能使用回退按钮进行回退
        // location.replace("https://www.baidu.com");
    </script>
</body>

</html>

6 Navigator

  • Navigator
    • Navigator代表当前浏览器的信息，通过该对象可用来识别不同的浏览器。
    • 目前一般只使用userAgent判断浏览器信息，不同浏览器的userAgent不同。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Navigator</title>
</head>

<body style="text-align: center"><br>
    <!-- JavaScript由上到下执行 -->
    <script>
        var ua = navigator.userAgent;
        if (/firefox/i.test(ua)) {
            alert("火狐浏览器！");
        } else if (/chrome/i.test(ua)) {
            alert("谷歌浏览器！");
        } else if (/msie/i.test(ua)) {
            alert("IE5-IE10浏览器！");
        } else if ("ActiveXObject" in window) {
            // IE11中已将微软和IE相关的标识都去除了
            // 可通过浏览器特有的对象ActiveXObject来判断
            alert("IE11浏览器！");
        }
    </script>
</body>

</html>

7 小汽车动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>小汽车动画</title>
    <style>
        /* 控制器样式 */
        .controller {
            width: 600px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
            text-align: center;
        }

        .controller button {
            outline: none;
            border: none;
            margin: 0px;
            padding: 0px;
            width: 200px;
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
            background-color: #E9E9E9;
            cursor: pointer;
            float: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 2px solid #F0F0F0;
        }

        .controller button:hover {
            background-color: #F9F9F9;
        }


        /* 公路样式 */
        .road {
            width: 100%;
            height: 100px;
            position: relative;
            margin-top: 50px;
            background: lemonchiffon;
            opacity: .90;
        }

        .road800 {
            width: 800px;
            height: 100px;
            background: greenyellow;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1000;
            opacity: .75;
        }

        .road1200 {
            width: 1200px;
            height: 100px;
            background: lavender;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 500;
        }


        /* 小汽车样式 */
        div#car {
            width: 135px;
            height: 100px;
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1500;
            background-image: url("./file/car.png");
            background-repeat: no-repeat;
            /* 调整图标大小以适应容器 */
            background-size: contain;
            background-position: center;
        }

        /* 小汽车反向样式 */
        div#car.reverse {
            /* 水平翻转 */
            transform: scaleX(-1);
        }
    </style>
</head>

<body style="text-align: center"><br><br>
    <div class="controller">
        <button id="btn1">移动到800PX</button>
        <button id="btn2">移动到1200PX</button>
        <button id="btn3">回家啦！</button>
    </div>

    <div class="road">
        <div class="road800"></div>
        <div class="road1200"></div>
        <div id="car"></div>
    </div>

    <!-- JavaScript是由上到下执行的 -->
    <script>
        document.getElementById("btn1").onclick = function () {
            move(document.getElementById("car"), 800);
        };

        document.getElementById("btn2").onclick = function () {
            move(document.getElementById("car"), 1200);
        };

        document.getElementById("btn3").onclick = function () {
            move(document.getElementById("car"), 0);
        };

        /* 通用的移动函数 */
        function move(element, target) {
            // 先清理定时器
            clearInterval(element.timeId);
            // 一会要清理定时器(只产生一个定时器)
            element.timeId = setInterval(function () {
                // 获取对象当前的位置
                var current = element.offsetLeft;
                // 每次移动多少像素
                var step = 10;
                // 判断是往正方向走还是往相反方向走
                step = current < target ? step : -step;
                // 每次移动后的距离
                current += step;
                // 判断当前移动后的位置是否到达目标位置
                if (Math.abs(target - current) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    // 清理定时器
                    clearInterval(element.timeId);
                    element.style.left = target + "px";
                }
                // 判断是否需要反转
                if (target < element.offsetLeft) {
                    // 添加反向类
                    element.classList.add("reverse");
                } else {
                    // 移除反向类
                    element.classList.remove("reverse");
                }
            }, 20);
        }
    </script>
</body>

</html>

8 网页图片飞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 代码复制粘贴到带有图片的网页console中，回车执行
R = 0;
x1 = 0.1;
y1 = 0.05;
x2 = 0.25;
y2 = 0.24;
x3 = 1.6;
y3 = 0.24;
x4 = 300;
y4 = 200;
x5 = 300;
y5 = 200;

var DI = document.getElementsByTagName("img");
var DIL = DI.length;

function A() {
    for (i = 0; i < DIL; i++) {
        var DIS = DI[i].style;
        DIS.position = "absolute";
        DIS.left = Math.sin(R * x1 + i * x2 + x3) * x4 + x5 + "px";
        DIS.top = Math.cos(R * y1 + i * y2 + y3) * y4 + y5 + "px";
    }
    R++;
}

var tag = setInterval("A()", 5);

document.onmousedown = function () {
    clearInterval(tag);
    for (i = 0; i < DIL; i++) {
        DI[i].style.position = "static";
    }
};

void (0);
Web
#Web #BOM #Window #Location #Navigator
Js BOM
https://stitch-top.github.io/2024/08/29/web/web01-javascript/javascript05-js-bom/
作者
Dr.626
发布于
2024年8月29日 00:00:01
许可协议