BOM:浏览器对象模型(Browser Object Model )
用于对浏览器的操作,提供了独立于内容而与浏览器交互的内容,其核心对象是window。
BOM常用对象:
window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;
history : go(参数) , back() , foward() ;
location : herf属性.
window:
1、它是js访问浏览器窗口的一个接口
2、它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。
(1)窗口加载事件:
window.onload = function() {} 或
window.addEventLisrener("load",function() { });
document.addEventLisrener('DOMContentLoaded',function()) {};
注意:
1、window.onload是窗口加载事件,当文档内容完全加载完成会触发该事件,就调用处理函数。
2、window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。
3、addEventLisrener没有次数限制。
"load"等页面内容全部加载完毕,包含页面DOM元素,图片,flash,css等等。
DOMContentLoaded 是DOM加载完毕,不包含flash,css等就可以执行,记载速度比load更快一点。
<!DOCTYPE html>
<html>
<head>
<title>页面加载事件</title>
<meta charset="utf-8">
<script>
window.onload = function() {
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('我被显示辣!!');
})
}
window.addEventListener('load',function() {
alert('我可以显示一遍!');
})
window.addEventListener('load',function() {
alert('我可以显示两遍!!');
})
document.addEventListener('DOMContentLoaded',function() {
alert('我老快了!')
})
</script>
</head>
<body>
<button>点我!</button>
</body>
</html>
(2)调整窗口大小事件:
window.onresize = function() { }
window.addEventListener("resize",function(){});
正常宽度: 窗口宽度小于600像素时:
实现:
<!DOCTYPE html>
<html>
<head>
<title>页面加载事件</title>
<meta charset="utf-8">
<style>
div {
width:200px;
height: 200px;
background-color: pink;
}
</style>
<script>
window.addEventListener('load',function(){
//先后获取div对象
var div = document.querySelector('div');
//添加事件
window.addEventListener('resize',function(){
//如果窗口宽度小于600像素
if(window.innerWidth <= 600){
div.style.display = 'none';
}else {
div.style.display = 'block';
}
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
(3)定时:
①setTimeout定时器:
window.setTimeout(调用函数,[延迟的毫秒数]);
window.clearTimeout(定时器名字);
效果:
实现:
<!DOCTYPE html>
<html>
<head>
<title>定时函数的使用</title>
<meta charset="utf-8">
</head>
<body>
<script>
function timer() {
alert('时间到了');
}
var timer1 = setTimeout(timer,2000);
//关闭定时器
//clearTimeout(timer1);
</script>
</body>
</html>
②setInterval(调用函数,[延迟的毫秒数])定时器:
每隔一段时间,都会调用这个函数。
<!DOCTYPE html>
<html>
<head>
<title>定时函数的使用</title>
<meta charset="utf-8">
</head>
<body>
<script>
function timer() {
alert('时间到了');
}
var timer1 = setInterval(timer,2000);
//关闭定时器
//clearInterval(timer1);
</script>
</body>
</html>
在网页中弹出广告几秒后再消失:
弹出广告时的效果:
实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>注册网页</title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 1px solid lightsalmon;
background-color: azure;
}
.dd1 {
height: 60px;
border: 1px solid pink;
float: left;
/*设置向左浮动*/
}
.dd2 {
width: 1200px;
height: 60px;
background-color: black;
border: 1px solid palevioletred;
}
a {
text-decoration: none;
}
/* 清除浮动 */
#clear {
clear: both;
}
</style>
<script>
function init() {
//定时轮播图片
setInterval("changeImg()",2000);
//1.设置广告图片定时显示
time = setInterval("showAd()",2000);
}
//轮播图片函数
var i=0;
function changeImg() {
i++;
document.getElementById("img1").src="s"+i+".jpg";
if(i==3){
i=0;
}
}
//2.广告显示函数
function showAd(){
//3.确定广告图片的位置
var pos = document.getElementById("img2");
//4.修改广告图片属性让其显示
pos.style.display = "block";
//5.清除显示广告的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",2000);
}
//7.隐藏广告图片的函数
function hiddenAd() {
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display = "none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>
</head>
<body onload="init()">
<!--第一层-->
<div>
<img src="p1.jpg" height="400px" width="1200px" id="img2" style="display:none"/>
<div class="dd1">
<img src="tb1.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb2.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb3.png" width="398px" height="60px" />
</div>
</div>
<!-- 清除浮动 -->
<div id="clear"></div>
<!--第二层-->
<div class="dd2">
<p>
<a href="#"><font color="white" size="5px"> 首页 </font></a>
<a href="#"><font color="white" size="3px">手机数码</font></a>
<a href="#"><font color="white" size="3px">电脑办公</font></a>
<a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
<a href="#"><font color="white" size="3px">家用电器</font></a>
</p>
</div>
<!-- 第三层 -->
<div>
<img src="s1.jpg" width="1200px" height="715px" id="img1" />
</div>
</body>
</html>
页面的跳转,点击链接跳转到下一个网页,再通过history的go(),或者back()方法跳转回来
效果:
实现:
页面跳转:
<!DOCTYPE html>
<html>
<head>
<title>页面转换</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<a href="history.html">点我啊!</a>
</body>
</html>
history:
<!DOCTYPE html>
<html>
<head>
<title>history</title>
<meta charset="utf-8">
<script>
function fanhui() {
//history.go(-1); //方法一
history.back();
}
</script>
</head>
<body>
<input type="button" value="返回上一页" onclick="fanhui()">
</body>
</html>