[toc]
BOM 对象
- window 对象 (全局对象)
- screen 对象包含有关用户屏幕的信息
- location 对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面。
- history 对象包含浏览器的历史。
- navigator 对象包含有关访问者浏览器的信息。
screen 对象
window 对象
window 对象是全局对象，所有在浏览器可以直接使用的方法，都是 window 对象的方法。例如：
- 计时器方法
- 弹出框方法
弹出框
- alert
- prompt
- confirm
在开发应用当中，一般不使用系统自带的弹出框，移动端可能会被屏蔽。
例 1 - 猜数字
- 随机生成一个 1~100 的数字。
- 在 prompt 弹出框中猜数字。
- 提示【大于目标结果】【小于目标结果】【恭喜你回答正确】。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
let target = Math.floor(Math.random() * 100 + 1);
console.log(target);
function guessNumber() {
let num = prompt('请输入一个1-100的数');
if (num == target) {
console.log("恭喜你猜对了");
} else if (num < target) {
console.log("小于正确答案");
guessNumber();
} else if (num > target) {
console.log("大于正确答案");
guessNumber();
}
}
guessNumber();
|
例 2 - 水果列表删除提示功能
- 制作一个水果列表。
- 删除选中的水果。
- 删除时，使用 confirm 提示是否确认删除。
location 对象
location.href - 属性返回当前页面的 URL - “https://www.baidu.com"location.hostname - 主机的域名 -“baidu.com”location.pathname - 当前页面的路径和文件名 “/s”location.port - 端口 - “8080”location.protocol -协议 - “https:”
页面跳转 location.href = "http://www.baidu.com" ;
navigator 对象
例如 navigator.userAgent ，可以获取浏览器 UA。它可以应用到切换 PC 移动端布局。
课后练习
- 使用 prompt 实现一个猜数字的游戏。
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
| let target = Math.floor(Math.random() * 100 + 1);
console.log(target);
let chanceNum = 10;
function guessNumber(chanceNum) {
let num = prompt('请输入一个1-100的数（输入quit可以退出游戏）');
let chance = `你还有${chanceNum}次机会`;
if (num == target) {
console.log("恭喜你猜对了");
} else if (num < target) {
console.log("小于正确答案");
console.log(chance);
if (chanceNum == 0) {
console.log(`答案是${target}`);
console.log("Game Over!")
return;
}
chanceNum--;
guessNumber(chanceNum);
} else if (num > target) {
console.log("大于正确答案");
console.log(chance);
if (chanceNum == 0) {
console.log(`答案是${target}`);
console.log("Game Over!")
return;
}
chanceNum--;
guessNumber(chanceNum);
} else if (num === "quit") {
console.log("Quit!")
}
}
guessNumber(chanceNum);
|
- 使用 confirm 实现一个水果列表删除的提示功能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <ul class="fruit-list">
<li>香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
<li>香蕉</li>
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
<script>
let ul = document.querySelector('.fruit-list');
ul.onclick = function(e) {
let mark = confirm('是否删除此水果，删除后数据不能恢复');
if (mark == true) {
ul.removeChild(e.target);
}
}
</script>
|
以上内容编写于 2022 年 2 月 15 日 00 点 55 分。