window对象
内置函数普遍是window对象的方法,eg: setInterval()和alert()
window.onresize监听窗口尺寸大小变化
窗口卷动高度
scroll事件
Navigator对象
History对象
<a href="javascript:history.back();">回退</a>
Location对象
可以调用location的reload方法以重新加载当前页面,参数true表示强制从服务器强制加载
window.location.reload(true);
BOM特效开发
案例一:返回顶部按钮特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
body{
height: 5000px;
background-image: linear-gradient(to bottom,blue,green,yellow);
}
.backtotop{
padding: 10px;
width: 60px;
height: 60px;
background-color: rgba(255,255,255,.6);
bottom: 100px;
right: 100px;
position: fixed;
/* 小手状 */
cursor: pointer;
box-sizing: border-box;
text-align: center;
}
</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 (){
// 不断让scrollTop减少
document.documentElement.scrollTop-=100;
// 定时器肯定要停
if (document.documentElement.scrollTop<=0){
clearInterval(timer);
}
},20);
}
</script>
</body>
</html>
案例二:楼层导航效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#box {
width: 400px;
height: 400px;
margin: 60px auto;
border: 4px solid red;
}
#para {
width: 60px;
height: 60px;
background-color: orange;
}
ul{
list-style: none;
padding-top: 10px;
}
li{
padding-top: 10px;
position: relative;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><p id="para"></p></li>
</ul>
</div>
<script>
var para = document.getElementById('para');
// 净top值,使用这个属性时,所有祖先元素不要有定位,有定位就不好用了
console.log(para.offsetTop);//本来为84 给li加上定位后,变为10
</script>
</body>
</html>
当元素数量比较多时,就要使用事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.content-part {
width: 1000px;
margin: 0px auto;
margin-bottom: 30px;
background-color: #ccc;
font-size: 50px;
}
.floornav {
position: fixed;
top: 50%;
right: 40px;
width: 120px;
height: 200px;
background-color: orange;
margin-top: -100px;
}
.floornav ul {
list-style: none;
}
.floornav ul li {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 26px;
cursor: pointer;
}
.floornav ul li.current {
background-color: purple;
color: white;
}
</style>
</head>
<body>
<nav class="floornav">
<ul id="list">
<li data-n="科技" class="current">科技</li>
<li data-n="体育">体育</li>
<li data-n="新闻">新闻</li>
<li data-n="娱乐">娱乐</li>
<li data-n="视频">视频</li>
</ul>
</nav>
<section class="content-part" style="height: 674px;" data-n="科技">
科技栏目
</section>
<section class="content-part" style="height: 567px;" data-n="体育">
体育栏目
</section>
<section class="content-part" style="height: 739px;" data-n="新闻">
新闻栏目
</section>
<section class="content-part" style="height: 274px;" data-n="娱乐">
娱乐栏目
</section>
<section class="content-part" style="height: 994px;" data-n="视频">
视频栏目
</section>
<script>
// 使用事件委托给li添加监听
var list = document.getElementById('list');
var lis = document.querySelectorAll('#list li');
list.onclick = function (e) {
if (e.target.tagName.toLowerCase() == 'li') {
var n = e.target.getAttribute('data-n');
// 可以用属性选择器(就是方括号选择器)来寻找带有相同data-n的content-part
var contentPart = document.querySelector('.content-part[data-n=' + n + ']');
console.log(contentPart.offsetTop);
// 让页面的卷动自动成为这个盒子的offsetTop的值
document.documentElement.scrollTop = contentPart.offsetTop;
}
}
// 在页面加载好之后,将所有的content-part盒子的offsetTop值推入数组
var offsetTopArr = [];
var contentParts = document.querySelectorAll('.content-part');
// 遍历所有的contentPart,将他们的净top值推入数组
for (var i = 0; i < contentParts.length; i++) {
offsetTopArr.push(contentParts[i].offsetTop);
}
// 为了最后一项可以方便比较,可以在数组推入无穷大
offsetTopArr.push(Infinity);
console.log(offsetTopArr);
// 当前所在楼层
var nowfloor = -1;
// 窗口的卷动
window.onscroll = function () {
var scrollTop = Math.ceil(document.documentElement.scrollTop);
// 遍历offsetTopArr数组,看看当前的scrollTop值在哪两个楼层之间
for (var i = 0; i < contentParts.length; i++) {
if (scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i + 1]) {
break;
}
}
// 退出循环时,i是几,就表示当前楼层是几
// 如果当前所在楼层,不是i,表示换楼层了
if (nowfloor != i) {
console.log(i);
// 让全局变量改变为这个楼层号
nowfloor = i;
// 设置下标为i的项有current
for (var j = 0; j < lis.length; j++) {
if (j == i) {
lis[j].className = 'current';
} else {
lis[j].className = '';
}
}
}
}
</script>
</body>
</html>