文章目录
前言
BOM(Browser 0bject Model）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是 BOM的顶层对象，其他对象都是该对象的子对象。
一、BOM
1.window对象
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window。
window下的两个特殊属性：name top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//window对象是BOM顶级对象，其他都是window的子集，例如document。
console.dir(window.document);
//输出window对象
console.dir(window);
//window对象在调用属性和方法时可以省略不写
// alert(1);
// window.alert(2);
//在全局作用域定义的全局变量，都是window的一个属性
var age = 18;
console.dir(window.age);
//window中的特殊属性值name，如果在全局定义一个name，那么只会给window中的name赋值
var name = 34;
console.log(window.name);
//top属性指的就是window这个顶级对象，只可以读不可以更改
var top = 22;
console.log(window.top);
</script>
</body>
</html>
2.对话框
alert：警示框
prompt ：提示框，有返回值
confirm：选择框，有返回值
注意：主要应用于一些小案例，在一些大型项目中会使用其他的来模拟这几种对话框的效果，但不会直接使用这几种对话框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="alert" id="btn1">
<input type="button" value="prompt" id="btn2">
<input type="button" value="confirm" id="btn3">
<script>
// 获取元素
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
//警示框
btn1.onclick = function () {
alert("hello");
};
//提示框
//有返回值，返回值就是用户输入的内容
btn2.onclick = function () {
prompt("请输入一个数字",12);
};
//用户确认和取消选择框
//有返回值，如果用户选择确定，返回值为true，用户选择取消，返回值为false
btn3.onclick = function () {
var isSure = confirm("确认要删除这项数据吗")
console.log(isSure);
};
</script>
</body>
</html>
3.onload加载事件
给 window对象或者〈img〉等元素添加onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。
其中 window对象加载完毕:指的是所有HTML结构加载完，并且外部引入资源视频）也加载完毕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 440px;
border: 10px solid #f00;
}
#box img {
display: block;
width: 440px;
}
</style>
</head>
<body>
<div id="box">
<img src="images/lunbo/01.jpg" alt="">
<img src="images/lunbo/02.jpg" alt="">
<img src="images/lunbo/03.jpg" alt="">
<img src="images/lunbo/04.jpg" alt="">
<img src="images/lunbo/05.jpg" alt="">
</div>
<script>
var box = document.getElementById("box");
var pics = box.getElementsByTagName("img");
//由于图片或视频等加载时间过长，避免等待，会先执行图片后面的js代码，如果js中要获取图片的宽高等，就获取不到
// console.log(box.clientHeight);
//加载事件，图片加载完毕后执行的事件
// pic.onload = function () {
// console.log(box.clientHeight);
// };
//所有图片加载完获取box、的高度
// var sum = 0 ;
// for (var i = 0;i < pics.length ; i++) {
// pics[i].onload = function () {
// sum++;
// if (sum = pics.length) {
// console.log(box.clientHeight);
// }
// };
// }
window.onload = function () {
console.log(box.clientHeight);
};
</script>
</body>
</html>
二、延时、定时器
1.延时器
window.setTimeout():两个参数，第一个参数是执行函数，第二个参数是毫秒数，1000毫秒=1秒。
window.clearTimeout():一个参数，参数是需要清除的延时器的变量名（前期制作延时器要存储到一个变量中，方便后期清除延时器。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//制作一个延时器
//存到一个变量中，方便后期清除延时器
//异步语句
var timeout = window.setTimeout(function () {
console.log(0);
},2000);
//同步语句
console.log(1);
console.log(2);
//清除延时器
window.clearTimeout(timeout);
</script>
</body>
</html>
延时器案例：函数节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击生成随机数" id="btn">
<script>
//获取元素
var btn = document.getElementById("btn");
//生成随机数
//制作一个开关，如果为true表示锁住，false表示打开
var lock = false;
btn.onclick = function () {
if (lock) {
return;
}
console.log(Math.random());
lock = true;
//制作一个延时器，每当过了两秒就把block打开变为false状态
window.setTimeout(function () {
lock = false;
},2000);
};
</script>
</body>
</html>
2.定时器
window.setInterval():两个参数，第一个参数是要执行的函数，第二个参数是间隔时间毫秒。
window.clearInterval():一个参数，参数是需要清除的定时器的变量名（前期制作延时器要存储到一个变量中，方便后期清除定时器。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//定义一个定时器，每间隔1秒输出i的值
var i = 1;
var timer = window.setInterval(function () {
console.log(i++);
},1000)
//清除一个定时器
window.clearInterval(timer);
</script>
</body>
</html>
注意：将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况
1、多次点击开始，会造成加速
2、多次点击开始，不能够再停止
## 定时器案例：简单运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
//获取元素
var start = document.getElementById("start");
var box= document.getElementById("box");
//定义一个变量表示元素的位置
var noeleft = 0;
//点击开始，定时器执行
start.onclick = function () {
setInterval(function () {
noeleft += 10;
box.style.left = noeleft + "px";
},100)
};
</script>
</body>
</html>
三、清除定时器问题
1.设表先关方法
将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况：
多次点击开始，会造成加速；多次点击开始，不能够再停止。
设表先关：每次开启定时器之前先清除一次前面的定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<input type="button" value="结束" id="end">
<script>
//获取元素
var start = document.getElementById("start");
var box= document.getElementById("box");
var end = document.getElementById("end");
//定义一个变量表示元素的位置
var noeleft = 0;
var timer;
//点击开始，定时器执行
start.onclick = function () {
//每次开启定时器前，先清除定时器(设表先关)
clearInterval(timer);
timer = setInterval(function () {
noeleft += 10;
box.style.left = noeleft + "px";
},100)
};
//点击结束，清除定时器
end.onclick = function () {
clearInterval(timer);
};
</script>
</body>
</html>
2.拉中停表方法
需求:要求元素走到指定位置停止，例如让元素停止在500px的位置.
问题:如果步长设置的不合理，停止的位置可能不是正好在500处。
拉终停表:在定时器内部每次都要判断是否走到了终点，要不要停止定时器,如果走到或超过了终点,强行拉到重点，并停止定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<input type="button" value="结束" id="end">
<script>
//获取元素
var start = document.getElementById("start");
var box= document.getElementById("box");
var end = document.getElementById("end");
//定义一个变量表示元素的位置
var noeleft = 0;
var timer;
//点击开始，定时器执行
start.onclick = function () {
//每次开启定时器前，先清除定时器(设表先关)
clearInterval(timer);
timer = setInterval(function () {
noeleft += 37;
//判断这一次的运动是否走到了500的位置
if (noeleft >= 500) {
clearInterval(timer);
//强行拉到500的位置
noeleft = 500;
}
box.style.left = noeleft + "px";
},100)
};
//点击结束，清除定时器
end.onclick = function () {
clearInterval(timer);
};
</script>
</body>
</html>
3.步标整除方法
需求:在规定时间内让元素走到规定的结束位置，时间间隔可以更改例如:让元素在﹖秒钟内，left属性从0走到500px.
步标整除：
总距离=步长*次数;
时间间隔自定义，总时长固定
求出总次数=总时间/时间间隔
定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
//获取元素
var start = document.getElementById("start");
var box= document.getElementById("box");
//开始位置，结束位置，总时间，时间间隔
var nowleft = 0;
var endleft = 200;
var time = 2000;
var interval = 100;
var maxcount = time / interval
//定义累加器，累加次数
var count = 0;
//求出步长
var step = (endleft - nowleft) / maxcount;
//信号量，用来保存定时器
var timer;
//点击事件触发定时器
start.onclick = function () {
//每次触发定时器前，先清除前面一个定时器
clearInterval(timer);
timer = setInterval(function () {
//每次走的位置
nowleft += step;
//每走一次让累加
count++;
//停止计时器
if (count >= maxcount) {
//拉终停表
nowleft = endleft;
clearInterval(timer);
}
//将nowleft添加样式
box.style.left = nowleft + "px";
},interval)
};
</script>
</body>
</html>
4.多属性运动问题
多个属性运动时，每条属性都单独运动就太麻烦，代码量比较繁琐，这个时候就可以封装一个动画函数，多个属性上都可以进行运动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
opacity: 0.3;
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
//获取元素
var start = document.getElementById("start");
var box= document.getElementById("box");
//调用函数
animate(box,{width: 200,height: 200,left: 500,opacity: 1},2000);
//封装函数
function animate(ele,end,time) {
//获取起始位置
var start = {};
for (var k in end) {
start[k] = parseFloat(window.getComputedStyle(ele)[k]);
}
//定义时间间隔
var interval = 50;
//定义总次数
var maxcount = time / interval;
//累加器，用于累加次数
var count = 0;
//定义步数
var step = {};
for (var k in end) {
step[k] = (end[k] - start[k]) / maxcount
}
//信号量，用于接收定时器
var timer;
//触发定时器
timer = setInterval(function () {
for (var k in end) {
start[k] += step[k];
}
//累加次数
count++;
//判断是否到结束位置而停止定时器
if (count >= maxcount) {
//拉终停表
for (var k in end) {
start[k] = end[k];
}
clearInterval(timer);
}
//给元素添加属性样式
for (var k in start) {
//判断是否是opacity属性
if (k === "opacity") {
ele.style[k] = start[k];
} else {
ele.style[k] = start[k] + "px";
}
}
},interval)
}
</script>
</body>
</html>
四、案例
1.简单无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
position: relative;
width: 830px;
height: 130px;
border: 10px solid #000;
margin: 100px auto;
overflow: hidden;
}
.scroll ul{
position: absolute;
top: 0;
left: 0;
width: 5000px;
height: 130px;
}
.scroll ul li{
float: left;
width: 200px;
height: 130px;
margin-right: 10px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<ul id="munit">
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5.png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5.png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
</ul>
</div>
<script src="common.js"></script>
<script>
//1.获取元素
var scroll = my$("scroll");
var munit = my$("munit");
//2.轮播
var nowLeft = 0;
//定义一个折返点，如果运动到一个数值那么就折返替换
var back = -1260;
//接收定时器
var timer;
//定时器，封装在函数内部，方便调用
timer = setInterval(run,10);
function run() {
nowLeft -= 2;
//判断 是否折返
if (nowLeft == back) {
nowLeft = 0;
}
//给ul赋值样式
munit.style.left = nowLeft + "px";
}
//3.鼠标移上时，停止轮播
scroll.onmouseover = function () {
clearInterval(timer);
}
//4.鼠标离开时，继续轮播
scroll.onmouseout = function () {
timer = setInterval(run,10);
}
</script>
</body>
</html>
2.高级无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
width: 830px;
height: 130px;
border: 10px solid #000;
margin: 100px auto;
overflow: hidden;
}
.scroll .inner {
position: relative;
width: 5000px;
}
.scroll ul {
position: absolute;
top: 0;
left: 0;
height: 130px;
list-style: none;
}
.scroll ul li {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="inner">
<ul id="munit">
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/2.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5.png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
//1.获取元素
var scroll = my$("scroll");
var munit = my$("munit");
//2.轮播
var nowLeft = 0;
//定义一个折返点，如果运动到一个数值那么就折返替换
//直接获取一组图片的宽度作为折返点
var back = -munit.offsetWidth;
//获取第二组图片
munit.innerHTML = munit.innerHTML + munit.innerHTML;
//接收定时器
var timer;
//定时器，封装在函数内部，方便调用
timer = setInterval(run,5);
function run() {
nowLeft -= 1;
//判断 是否折返
if (nowLeft == back) {
nowLeft = 0;
}
//给ul赋值样式
munit.style.left = nowLeft + "px";
}
//3.鼠标移上时，停止轮播
scroll.onmouseover = function () {
clearInterval(timer);
}
//4.鼠标离开时，继续轮播
scroll.onmouseout = function () {
timer = setInterval(run,5);
}
</script>
</body>
</html>
3.点击切换轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.carousel{
position: relative;
width: 880px;
height: 550px;
border: 1px solid #333;
margin: 50px auto;
}
.pic li{
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
display: none;
}
.pic li.current{
display: block;
}
.btn a{
position: absolute;
top: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
background-color: rgba(255,255,255,0.3);
text-decoration: none;
color: #444;
text-align: center;
line-height: 80px;
font-size: 60px;
font-family: "SimSun";
}
.btn .left{
left: 10px;
}
.btn .right{
right: 10px;
}
.btn a:hover{
background-color: rgba(255,255,255,0.7);
}
.sub{
position: absolute;
bottom: 30px;
left: 50%;
width: 200px;
height: 40px;
margin-left: -100px;
border-radius: 20px;
background-color: rgba(255,255,255,0.3);
}
.sub li{
float: left;
width: 20px;
height: 20px;
margin: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.sub li.current{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="pic" id="pic">
<li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
<li><img src="images/lunbo/02.jpg" alt=""></li>
<li><img src="images/lunbo/03.jpg" alt=""></li>
<li><img src="images/lunbo/04.jpg" alt=""></li>
<li><img src="images/lunbo/05.jpg" alt=""></li>
</ul>
<div class="btn" id="btn">
<a href="javascript:;" class="left" id="leftbtn"><</a>
<a href="javascript:;" class="right" id="rightbtn">></a>
</div>
<ol class="sub" id="sub">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="common.js"></script>
<script>
//编程思路：定义一个全局信号量，让每个事件之间通过信号量协同作业
//1.获取元素
var carousel = my$("carousel");
var ul = my$("pic");
var ulLis = ul.children;
var leftbtn = my$("leftbtn");
var rightbtn = my$("rightbtn");
var ol = my$("sub");
var olLis = ol.children;
//2.点击右按钮切换图片事件
//定义一个信号量，存储的是每个li的下标
var idx = 0;
rightbtn.onclick = rightHandle;
//3.点击左按钮切换图片事件
leftbtn.onclick = function () {
idx--;
//判断下标是否小于0，如果小于那么就重新赋值ulLis长度
if (idx < 0) {
idx = ulLis.length - 1;
}
change();
};
//4.小圆点点击切换图片事件
for (var i = 0;i < olLis.length; i++) {
//记录下标
olLis[i].index = i;
olLis[i].onclick = function () {
idx = this.index;
change();
}
}
//5.图片自动轮播
var timer;
timer = setInterval(rightHandle,1000);
//6.鼠标移上停止自动轮播
carousel.onmouseover = function () {
clearInterval(timer);
};
//7.鼠标离开继续自动轮播
carousel.onmouseout = function () {
timer = setInterval(rightHandle,1000);
};
//定义一个点击右按钮进行轮播的函数
function rightHandle() {
idx++;
//判断下标是否小于ulLis的出长度，如果小于长度那么就重新赋值0
if (idx > ulLis.length - 1) {
idx = 0;
}
change();
};
//图片切换函数
function change () {
for (var i = 0;i < ulLis.length; i++) {
//排他思想
//清除所有li的属性
ulLis[i].className = "";
olLis[i].className = "";
}
//保留自己
ulLis[idx].className = "current";
olLis[idx].className = "current";
}
</script>
</body>
</html>
4.返回顶部
//获取元素
var header = my$("top");
var backtop = my$("totop");
//混动事件，如果滚动超过10px，那么就减小top的高度，返回顶部的按钮出现
window.onscroll = function () {
if (document.documentElement.scrollTop > 10) {
header.className = "header fixed";
backtop.style.display = "block";
} else {
header.className = "header";
backtop.style.display = "none";
}
}
//点击返回顶部按钮，进行一个动画返回
var timer;
backtop.onclick = function () {
//起始值
var current = document.documentElement.scrollTop;
//结束值
var end = 0;
//步长
var step = 30;
timer = setInterval(function () {
current -= step;
if (current < end) {
current = end;
clearInterval(timer);
}
document.documentElement.scrollTop = current;
},10)
}
五、其他
1.location对象
href 可以获取或设置浏览器url的地址。
assgin：可以获取或设置浏览器url的地址。
replace：可以替换一个地址，但不能记录历史地址，在浏览器尚不能回退到上一个页面。
reload:重新加载当前页面，类似于键盘F5的刷新效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="跳转" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
//location href 可以获取地址，也可以设置地址
// console.log(location.href);
// location.href = "http://www.baidu.com/";
//assgin（） 和href功能一样，可以获取地址，可以设置一个新的地址
location.assign("http://www.baidu.com/");
//replace（） 替换成为一个新的地址
//与href 和assgin不同的是 没有记录上一个地址的功能，在浏览器中不能回退
location.replace("http://www.baidu.com/");
//reload() 重新加载 类似于f5刷新
// location.reload();
};
</script>
</body>
</html>
2.history对象
history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存。
back()，后退一个页面。
forword()，前进一个页面。
go(),参数前进就填写正数，后退就填负数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>First</h1>
<a href="second.html">跳转到二级页面</a><br>
<input type="button" value="前进" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 前进，查看之前记录的跳转后的页面
// history.forward();
history.go(1);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Second</h1>
<input type="button" value="后退" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 回退历史记录访问
// history.back();
history.go(-1);
};
</script>
</body>
</html>
总结
BOM相关的常用内容就到这里啦，熟能生巧还要多多练习啊，每天坚持学习前端。
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
