BOM
概况:
- 浏览器对象模型
- BOM可以让我们通过JS来操作浏览器
- 在BOM中提供了一组对象用来完成对浏览器操作
- BOM对象
widow:代表整个浏览器的窗口,同时window使网页中的全局对象
Navigator:代表当前浏览器信息,通过该对象可以识别不同浏览器
Location:代表当前浏览器的地址栏信息,通过它获取地址栏信息或操作浏览器页面跳转
History:浏览器的历史记录,可以通过它来操作浏览器历史记录,由于隐私问题该对象不能获取具体的历史纪录,只能通过浏览器向前或向后翻页,而且该操作只在当次访问有效
Screen:代表用户屏幕信息,通过它可以获取到用户显示器的相关信息
(这些BOM对象都是作为window对象的属性保存,可以通过window对象使用,也可以直接使用console.log(location);
)
Navigator
代表当前浏览器信息,通过该对象可以识别不同浏览器
由于历史原因,Navigator对象大部分属性都已经不能帮助我们识别浏览器。一般只会使用userAgent (返回由客户机发送服务器的 user-agent 头部的值。userAgent是一个字符串,其中包含有用来描述浏览器内容,不同浏览器有不同的userAgent ,举例Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。)console.log(navigator.userAgent);
判断浏览器
var ua=navigator.userAgent;
if(/firefox/i.test(ua)){
alert("你是火狐浏览器");
}else if(/chrom/i.test(ua)){
alert("chrom");
}else if(/mise/i.test(ua)){
alert("IE浏览器");
}else if("ActiveXObject" in window){
//如果通过userAgent不能判断,还可以通过浏览器中特有的对象来判断
alert("是IE11浏览器")
}
History
通过浏览器向前或向后翻页,仅限当次
window.onload=function(){
//length返回浏览器历史列表中的 URL 数量,但是一关闭就没
console.log(history.length);
//back退回上一个页面,作用和浏览器回退按钮相同
history.back;
//forward() 加载 history 列表中的下一个 URL。
history.forward;
//go() 加载 history 列表中的某个具体页面。
//需要一个整数来跳转,1,表示向前跳转一个页面;-2是向后跳两个页面
history.go(-1);
}
Location
代表当前浏览器的地址栏信息
//直接打印location直接获取完整路径
console.log(location);
//如果直接将location属性修改为一个完整路径,或相对路径则我们页面会直接自动跳转到该路径,并生成相应历史记录
location="http://www.baidu.com";
location="start.html";
//assign() 跳转到新的文档,作用和直接修改location相同
location.assign("http://www.baidu.com");
//reload() 重新加载当前文档,作用和刷新按钮相同,若在方法中传递true,会强制清空缓存刷新页面
location.reload(true);
//replace() 用新的文档替换当前文档,调用完毕会跳转页面,不会生成历史记录,不能使用回退按钮回退
location.replace("start.html");
}
widow
代表整个浏览器的窗口,同时window使网页中的全局对象
- 定时调用 setInterval和clearInterval
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。
<h1 id="count"></h1>
<script>
//setIntervalsetInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
//参数:1,回调函数,该函数每隔一段时间就会被调用;2,调用间隔的时间,单位是毫秒
//返回值:是一个number类型的数据,这是定时器的唯一标识
var num=1;
var count=document.getElementById("count");
var timer=setInterval(function(){
count.innerHTML=num++;
if(num==11){
clearInterval(timer)//关闭定时器,需要一个定时器作为参数,关闭对应的定时器
}
},500)
</script>
相关练习:图片自动切换
<style>
img{
width: 200px;
height: 200px;
}
</style>
<script>
window.onload=function(){
var img1=document.getElementById("img1");
var imgArr=["tupian/1.jpg","tupian/2.jpg","tupian/3.jpg","tupian/4.jpg"]
var index=0;
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
var time1;
//点击btn01图片开始切换
btn01.onclick=function(){
//防止多点,开启多个定时器,使图片切换过快
clearInterval(time1);
time1=setInterval(function(){
index++;
if(index<imgArr.length){
}else{
index=0;
}//也可以index = index % imgArr.length;
img1.src=imgArr[index];
},1000)
}
//点击btn02图片停止切换
btn02.onclick=function(){
//clearInterval可以接收任何参数不会报错
clearInterval(time1);
}
}
</script>
</head>
<body>
<img id="img1" src="tupian/1.jpg" alt=""><br/>
<button id="btn01">点击一下开始</button>
<button id="btn02">STOP</button>
</body>
tips:之前通过按键来控制盒子的方向和速度,这样会导致盒子速度比较卡顿,通过计时器可以使速度顺滑,下面是代码
var speed=10;
var dir=0
//开启定时器控制移动
setInterval(function(){
switch(dir){
case 37:
box1.style.left=box1.offsetLeft-speed+"px";
break;
case 38:
box1.style.top=box1.offsetTop-speed+"px";
break;
case 39:
box1.style.left=box1.offsetLeft+speed+"px";
break;
case 40:
box1.style.top=box1.offsetTop+speed+"px";
break;
}
},30)
//按键控制方向
document.onkeydown=function(event){
event=event||window.event;
var box1=document.getElementById("box1");
//按下CTRL速度加快
if(event.ctrlKey){
speed=50;
}else{
speed=10;
}
//left 37;up 38; right 39;down 40
dir=event.keyCode;
}
document.onkeyup=function(){
dir=0;
}
- 延时调用 setTimeout clearTimeout
//setTimeout()延时调用,隔一段时间以后再执行,且只会执行一次
//延时调用和定时调用可以相互代替
var time2=setTimeout(function(){
console.log(num++);
},3000);
//clearTimeout关闭一个延时调用
clearTimeout(time2);