window对象，BOM，window事件,延时器,DOM
01.定时器补充
function fn(){
console.log(1);
}
setInterval("fn()",100); //定时器调用匿名函数
/*
function(){} （常用）
fn(); //这个直接就运行了，会使运行结果不正确
"fn()"
*/
02.window对象
//都是window下面的方法，其中，这三个对话框都有阻塞浏览器其他功能的执行(阻止程序的运行)
alert('dfjjf'); //弹出一个对话框
confirm(); //弹出一个带有确定和取消按钮的对话框，点击确定返回true,点击取消返回false
prompt(); //输入框对话框，点击确定返回输入的内容，点击取消返回null
//设置窗口大小
open('url','(名称)','width = 400px,height:500px');
open('http://www.baidu.com','','width=300px,height;500px');
//window.resize(1000,200);在打开的百度的页面，改变窗口大小
close(); //关闭窗口
03.BOM
1.history对象
history.go()
参数： -1 后退 0 刷新 1前进
history.back(); 后退
history.forward();前进
2.location对象
location.href = ‘url’ 页面的跳转
location.reload(); 页面的刷新，如果参数为true，清除缓存
3.navigator对象
navigator.userAgent
pc端：”Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36″
移动端：”Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1″
简单测试：
location.href='http://www.baidu.com'; //页面跳转(属性)
location.reload(); //页面刷新（方法 ）
navigator.userAgent(); //在控制台输入之后，pc端打印出"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36"
navigator.userAgent(); //移动端结果："Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
04.window的事件
1.window.onload
window.onload = function(){
//等待页面加载完成之后，再执行onload里面的代码
}
2.window.onscroll(滚动条事件)
window.onscroll = function(){
//高频触发，滚动条只要滚动，就触发！！！
}
05.滚动条事件案例
吸顶效果
<style>
body{
height:4000px;
}
*{
margin:0;
padding:0;
}
header{
width:100%;
height:150px;
background:red;
}
nav{
width:100%;
height:40px;
background: blue;
}
</style>
<header></header>
<nav id="nav1"></nav>
<script>
/*
滚动条滚动，获取滚动条的高度(存在兼容性)
document.documentElement.scrollTop;
document.body.scrollTop;
*/
onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //兼容性
if(scrollTop >= 150){
nav1.style.position = 'fixed';
nav1.style.top = 0;
}else{
nav1.style.position = 'static'; //让它恢复原样
}
}
</script>
06.延时器
setTimeout(function(){
},1000)
<style>
width:100%;
height:100%;
background:blue;
</style>
<div id="box"></div>
<script>
var height = 300;
setTimeout(function(){
var timer = setInterval(function(){
//控制box的height值，实时减小box的height
height -= 10;
box.style.height = height + 'px';
//关闭定时器
if(height <= 0){
clearInterval(timer);
}
},30)
},0)
</script>
setTimeout(function(){
console.log(0);
},0); //设置为0时，立即打印
console.log(1);
//结果是1 0 由于异步加载的原因
07.回到顶部
<style>
*{
margin:0;
padding:0;
}
section{
width:400px;
height:2000px;
background:pink;
}
p{
font-size:20px;
color:black;
}
#btn{
font-size:40px;
width:50px;
height:50px;
display:block;
position:fixed;
right:0;bottom:0;
}
</style>
<section>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>