目录
1.BOM概述
BOM浏览器对象模型
(1)BOM可以使我们通过JS来操作浏览器;
(2)在BOM中为我们提供了一组对象,用来完成对浏览器的操作
2.BOM对象
(1)window
代表的是整个浏览器窗口,同时window也是网页中的全局对象;
(2)Nacigator
代表当前浏览器的信息,通过该对象可以来识别不同的浏览器;
(3)Location
代表当前浏览器的地址栏信息,通过location可以获得地址栏信息,或者操作浏览器跳转页面;
(4)History
代表历览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因该对象不能获取到具体的历史记录,只能操作浏览器向前或者向后翻页,而且该操作只在当次访问时有效;
(5)Screen
代表用户的屏幕信息,通过该对象可以获取到用户的显示器相关的信息;
这些BOM对象在浏览器中都是作为window对象属性保护的,可以通过window对象使用,也可以直接使用
3.Navigator对象
navigator.appName | 返回浏览器中的名称,如:IE11或Chrome等 |
navigator.appCodeName | 返回浏览器中的代码 |
navigator.platform | 属性返回浏览器引擎的产品名称 |
navigator.userAgent | 属性返回由浏览器发送到服务器的用户代理报头 |
4.History对象
history.back() | 可以用来回退到上一个页面,和浏览器回退按钮的作用一样 |
history.forward() | 可以用来跳转到下一个页面,和浏览器前进按钮的作用一样 |
history.go() | 可以用来跳转到指定的页面,它需要一个整数作为一个参数,可以前进和后退 |
5.Location对象
(1)location.assign():用来跳转到其他的页面,作用和直接修改location一样;
(2)location.reload():用于重新加载当前页面,作用和刷新按钮一样,如果在该方法中传递一个true作为参数,则会强制清空缓存刷新页面;
(3)location.replace:可以使用一个新的页面替换当前页面,调用完毕后会跳转页面不会生成历史记录,不能使用回退按钮回退。
6.定时器
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
clearTimeot() | 取消由setTimeout()方法设置的timeout |
setInterval() | 按照指定的周期(以毫秒计算)来调用函数或者计算表达式 |
clearTimeout() | 取消由setTimeout()方法设置的timeout |
(1)延时定时器的设置及移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<button>点击停止定时器</button>
<script>
var btn = document.querySelector("button");
var timer = setTimeout(function () {
alert("爆炸了!");
}, 3000);
//清除定时器,当点击button按钮后会清除定时器
btn.addEventListener("click", function () {
clearTimeout(timer);
})
</script>
</body>
</html>
延时调用一个函数不马上执行,而是隔一段时间在执行,且只会执行一次
(2)间歇定时器的设置及移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setInterval函数</title>
</head>
<body>
<script>
function timer() {
console.log("继续输出");
}
setInterval(timer,1000);//每隔1秒输出一次"继续输出"
clearInterval(timer);//清除定时器
</script>
<!--setInterval 每隔这个延时时间 就去调用一次这个回调函数 会调用很多次 重复调用这个函数-->
</body>
</html>
setInterval()定时器每隔一次设置的延时时间段,就会被调用,每次调用就会重复执行函数。
定时器相关练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时效果</title>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2023-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白
// 2. 开启定时器 每隔1秒钟调用一次函数
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
</html>