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>春暖花开</p>

转载于:https://www.cnblogs.com/ljp1997/p/11485116.html