1、BOM概述
BOM(浏览器对象模型)使 JavaScript 有能力与浏览器进行交互
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性
2、常见的BOM对象
Window:代表的是整个浏览器的窗口,也是网页中的全局对象
Navigator:代表的当前浏览器的信息,用来区分不同的浏览器
Location:代表当前浏览器的地址栏信息,用来获取地址栏信息或操作浏览器跳转页面
History:代表浏览器的历史记录,用来操作浏览器的历史记录
Screen:代表用户的屏幕的信息,用来获取到用户的显示器的相关信息
3、弹出框
JavaScript 有三种类型的弹出框:警告框、确认框和提示框
(1)警告框:确保信息传递给用户
当警告框弹出时,用户将需要单击“确定”来继续
语法:window.alert("sometext");
注:window.alert() 方法可以不带 window 前缀
例:
alert("我是一个警告框!");
(2)确认框:希望用户验证或接受某个东西
当确认框弹出时,用户将单击“确定”或“取消”来继续进行,“确定”返回 true,“取消”返回 false
语法:window.confirm("sometext");
注:window.confirm() 方法可以不带 window 前缀
例:
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
(3)提示框:希望用户在进入页面前输入值
“确定”返回输入值,“取消”返回 NULL
语法:window.prompt("sometext","defaultText");
注:window.prompt() 方法可以不带 window 前缀
例:
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
console.log(person);
}
4、定时事件
概念:
JavaScript 可以在时间间隔内执行
window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件
定时事件两个关键的方法
在等待指定的毫秒数后执行函数:setTimeout(function, milliseconds)
等同于 setTimeout(),但持续重复执行该函数:setInterval(function, milliseconds)
注:setTimeout() 和 setInterval() 都属于 window 对象的方法
5、延时器:setTimeout() 方法
语法:window.setTimeout(function, milliseconds);
参数一:执行的函数
参数二:指示执行之前的毫秒数
注:window.setTimeout() 方法可以不带 window 前缀
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<!-- JavaScript代码 -->
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 创建延时器
var timer = setTimeout(function () {
console.log("HelloWorld");
}, 3000);//等待三秒,后输出"HelloWorld"
// 清除延时器
// clearTimeout(timer);
};
</script>
</body>
</html>
6、定时器:setInterval() 方法
语法:window.setInterval(function, milliseconds);
参数一:要执行的函数。
参数二:每个执行之间的时间间隔的长度。
注:window.setInterval() 方法可以不带window前缀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<!-- JavaScript代码 -->
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 创建定时器
var timer = setInterval(function () {
console.log("HelloWorld");
}, 1000);//每隔一秒向控制台输出"HelloWorld"
// 清除定时器
// clearInterval(timer);
};
</script>
</body>
</html>