目录
1.BOM(Browser Object Model,浏览器对象模型)
1.3 窗口尺寸相关属性innerHeight,innerWidth,outerHeight,outerWidth
1.3.1 resize事件:当窗口大小改变是会出发resize事件
1.BOM(Browser Object Model,浏览器对象模型)
1.1 window对象
多个JS文件引入HTML文件
1.2 内置函数普遍是window方法
1.3 窗口尺寸相关属性innerHeight,innerWidth,outerHeight,outerWidth
若缩小浏览器窗口,再刷新页面,就会变化
1.3.1 resize事件:当窗口大小改变是会出发resize事件
1.3.2 已卷动高度
1.3.3 scroll事件
1.4 Navigator对象:获得一些浏览器信息
<!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>
console.log('浏览器品牌',navigator.appName);
console.log('浏览器版本',navigator.appVersion);
console.log('用户代理',navigator.userAgent);
console.log('操作系统',navigator.platform);
</script>
</body>
</html>
1.5 History对象
<!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>
<h1>history网页</h1>
<button id="btn">回退</button>
<a href="javascript:history.back();">回退</a>
<script>
var btn=document.getElementById('btn');
btn.onclick=function(){
history.back();
// history.go(-1)
}
</script>
</body>
</html>
1.6 Location对象
2.BOM特效开发
2.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>
body{
height: 5000px;
background-image: linear-gradient(to bottom,blue,green,yellow);
}
.backtotop{
width: 60px;
height: 60px;
background-color: #fff;
position: fixed;
bottom: 100px;
right: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="backtotop" id="backtotopBtn">返回顶部</div>
<script>
var backtotopBtn=document.getElementById('backtotopBtn');
var timer;
backtotopBtn.onclick=function(){
// 设表先关
clearInterval(timer);
// 设置定时器
timer=setInterval(function(){
document.documentElement.scrollTop-=200;
if(document.documentElement.scrollTop<=0){
clearInterval(timer);
}
},20);
};
</script>
</body>
</html>
2.2 楼层导航