1.BOM
- 浏览器对象模型
- BOM可以是我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
- BOM对象：
Window
- 代表的是整个浏览器窗口，同时window也是网页中的全局对象
Navigator
- 代表当前浏览器的信息，可识别不同浏览器
Location
- 代表当前浏览器的地址栏信息，可以获取地址栏信息，或者操作浏览器跳转页面
History
- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取具体的历史记录，只能操作浏览器向前或向后
而且该操作只在当次访问时有效
Screen
- 代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息（移动端用的较多
1.1Navigator
- 由于历史原因，Navigator里的大部分属性都已经不能帮助我们识别浏览器了
- 一般会只有userAgent来判断浏览器的信息
userAgent是一个字符串，这个字符串中包含用来面熟浏览器信息的内容
在IE11中已经将微软和IE相关的标识都去除了
通过UserAgent不能判断，还可以通过一些浏览器中特有的对象来判断
比如：ActiveXObject
var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
alert("你是火狐")；
}else if(/chrome/i.test(ua)){
alert("你是谷歌")；
}
1.2History
- length
- 属性，可以获取到当前访问的链接数量 - back()
- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样 - forward()
- 可以跳转到下一个页面，作用和浏览器的前进按钮一样 - go()
- 可以用来跳转到指定页面
- 需要一个整数作为参数
1：表示向前跳转一个页面
2：表示向前跳转量个页面
-1：表示向后跳转一个页面
-2：表示向后跳转量个页面
1.3Location
- 该对象中封装了浏览器的地址栏信息
- 如果直接打印location，则可以直接获取到地址栏的信息
- 如果将location属性修改为一个完整的路径或相对路径，则我们页面会自动跳转到该路径，并生成相应的历史记录
- assign()作用和直接修改location一样
- reload()重新加载，作用和刷新按钮一样
reload(true)表示强制清空缓存刷新，相当于ctrl+f5 - replace()可以使用一个新的页面替换当前页面，不会生成历史记录
1.4window对象方法
setInterval()
- 定时调用
- 可以将一个函数，每隔一段时间执行一次
- 参数：
1. 回调函数，该函数每隔一段时间被调用一次
2. 每次调用间隔的时间，单位是毫秒
- 返回值：
返回一个Number类型的数据
这个数字来作为定时器的唯一标识clearInterval()
- 可以关闭一个定时器setTimeout()
- 延时调用
- 延时调用一个函数，只会执行一次
- 与定时调用可以互相代替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>
<script>
window.onload = function(){
var img1 = document.getElementById("img1");
var imgArr = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
var index = 0;
var timer;
//为btn01绑定一个单机响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//在开启定时器之前，需要将上一个定时器关闭
clearInterval(timer);
//开启一个定时器
timer = setInterval(function(){
index++;
index %= imgArr.length;
img1.src = imgArr[index];
},100);
};
//为btn02绑定一个单机响应函数
var btn02 = document.getElementById("btn02");
//为btn01绑定一个单机响应函数
btn02.onclick = function(){
clearInterval(timer);
};
};
/*
错误原因：给btn02绑定函数时错绑成了01，导致btn01的函数被重置
*/
</script>
</head>
<body>
<img id="img1" src="img/1.jpg"/>
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
移动div丝滑版
<!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>
#box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
}
</style>
<script>
window.onload = function (){
var box1 = document.getElementById("box1");
var speed = 10 ;//设置位移速度
var dir = 0;
var timer = setInterval(function(){
switch(dir){
case "ArrowUp":
box1.style.top = box1.offsetTop-speed + "px";
break;
case "ArrowDown":
box1.style.top = box1.offsetTop+speed + "px";
break;
case "ArrowLeft":
box1.style.left = box1.offsetLeft-speed + "px";
break;
case "ArrowRight":
box1.style.left = box1.offsetLeft+speed + "px";
break;
}
},10)
document.onkeydown = function(event){
/* if(event.key == "ArrowUp"){
box1.style.top = box1.offsetTop-10 + "px";
}else if (event.key == "ArrowDown"){
box1.style.top = box1.offsetTop+10 + "px";
} */
//alert(event.key);//ArrowUp ArrowRight ArrowDown ArrowLeft
if(event.ctrlKey){
//按下control 加速
speed = 50;
}else{
speed = 10;
}
dir = event.key;
};
document.onkeyup = function(event){
dir = 0;
}
};
/*
给移动动作绑定一个定时器
*/
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
