js之BOM

# 1. BOM介绍

**BOM（Browser Object Model）**是指浏览器对象模型，通过它，可以操作浏览器相关的功能。

更直白一点讲：BOM相当于是一个模块，提供了关于浏览器操作的功能。

# 2. 提示框

alert，提示框；
confirm，确认框。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>BOM</title>
</head>
<body>
<input type="button" value="提示框" onclick="showAlert();">
<input type="button" value="确认框" onclick="showConfirm();">
<script type="text/javascript">
function showAlert() {
        alert('震惊了，Alex居然..');
}

function showConfirm() {
// 显示确认框
// result为true，意味着点击了确认。
// result为false，意味着点击了取消。
var result = confirm('请确认是否删除？');
        console.log(result);
}
</script>
</body>
</html>

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

# 3. 浏览器URL

location.href，获取当前浏览器URL；
location.href = "url"，设置URL，即：重定向；
location.reload()，重新加载，即：刷新页面。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>BOM</title>
</head>
<body>
<input type="button" value="获取当前URL" onclick="getUrl();">
<input type="button" value="重新加载页面" onclick="reloadPage();">
<input type="button" value="重定向到百度" onclick="redirectToBaidu();">

<script type="text/javascript">
function getUrl() {
        console.log(location.href);
}

function reloadPage() {
        location.reload();
}

function redirectToBaidu() {
        location.href = "http://www.baidu.com";
}
</script>
</body>
</html>

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

# 4. 定时器

setInterval(function(){},1000)，创建多次定时器。
clearInterval(定时器对象)，删除多次定时器。
setTimeout(function(){},1000)，创建单次定时器。
clearTimeout(定时器对象)，删除单次定时器。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>BOM</title>
</head>
<body>

<h1>计时器：<span id="time"></span></h1>
<input type="button" value="开始计时" onclick="start();">
<input type="button" value="停止计时" onclick="stop();">

<script type="text/javascript">
var time;

function start() {
        time = 0;
        document.getElementById('time').innerText = time;

        interval = setInterval(function () {
            time += 1;
            document.getElementById('time').innerText = time;
}, 1000);
}

function stop() {
        clearInterval(interval)
}
</script>
</body>
</html>

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

上次更新: 2022/08/25, 10:11:06

← js之DOM js之jQuery→