BOM2021-11-26

window常见事件onload

 

    <!-- 有了window.onload就可以把jS代码写到元素的上方，onload是等页面加载完毕，再去执行处理函数 -->
    <script>
    /* window.onload = function () {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('点击我');
        })
    }
    window.onload = function () {
        alert('222');//window.onload传统的注册事件方式只能写一次，如果有多个，会以最后一个为准
    } */

    //使用addEventListener可以多次使用，不受限制
    window.addEventListener('load' ,function() {
        var btn = document.querySelector('button');
        btn.addEventListener('click' ,function(){
            alert('点击了');
        })
    })
    window.addEventListener('load' ,function() {
        alert('22');
    })
    //document.addEventListener('DOMContentLoaded', function() {})
    //先弹出33 在弹出22 点击后弹出‘点击我’
    document.addEventListener('DOMContentLoaded', function() {
        alert('33');
    })
    </script>
    <button>点击</button>
    //load等页面全部加载完毕，包括dom元素 图片 flash css等
    //DOMContentLoaded 是DOM主要标签加载完毕，不包括图片 flash css等就可以执行，加载速度比load更快一些

 调整窗口大小的事件

    <script>
        window.addEventListener('load' ,function(){
        var div = document.querySelector('div');
        window.addEventListener('resize', function(){
            console.log('窗口变化了');
            console.log(window.innerWidth);
            //当窗口的宽度小于800 盒子隐藏，大于显示
            if (window.innerWidth < 800) {
                div.style.display = 'none';
            }else {
                div.style.display = 'block';
            }
        })
        })
    </script>

    <div></div>

定时器之setTimeout

    <script>
        //1. setTimeout
        //语法规范： window.setTimeout(调用函数，延迟时间);
        //①这个window再调用时可以省略
        //②这个延迟时间的单位是毫秒
        // setTimeout(function(){
        //     alert('两秒时间到了');
        // },2000);
        //③这个调用函数可以直接写函数，还可以写函数名，
            function fn () {
                alert('到了')
            }
            var time1 = setTimeout(fn,2000);
        //④页面中会有很多定时器，我们经常给定时器加标识符（名字）
            var time2 = setTimeout(fn,3000);
    </script>

 5s后自动关闭广告

    <script>
        window.addEventListener('load',function(){
            var img = document.querySelector('img');
            setTimeout(imgClose,5000);
            function imgClose  () {
                img.style.display = 'none';
            }
        })
    </script>
    <img src="images/zhy.png" alt="">

setTimeout定时器

    <!-- 五秒前点击按钮可以停止定时器 -->
    <button>点击停止定时器</button>
    <script>
        var time = setTimeout(function(){
            console.log('爆炸了');
        },5000)
        var btn = document.querySelector('button');
        btn.addEventListener('click' ,function(){
            clearTimeout(time);
        })
    </script>

 倒计时之setInterval

    <script>
        //1. setInterval(间隔)
        //语法规范： window.setInterval(调用函数，间隔时间)
        setInterval(function(){
            console.log('每一秒显示一次');
        },1000)
        //2.setTimeout 延迟时间到了就去调用这个回调函数
        //3.setInterval 每隔这个延迟时间，就会调用这个回调函数，调用多次。
    </script>

 倒计时案例

    <span class="hour">1</span>
    <span class="minute">2</span>
    <span class="second">3</span>
    <script> 
        //1. 获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-11-26 23:00:00');//1970-1-1距离用户输入的时间过了多少毫秒
        //开启定时器
        setInterval(countDown,1000);
        function countDown() {
            var nowTime = +new Date();//括号为空返回的就是当前时间的总毫秒数
            var times = (inputTime - nowTime) / 1000;//剩余时间的总秒数
            var h = parseInt(times/60/60%24);
            h = h > 10? h : "0" + h;
            hour.innerHTML = h;
            var m = parseInt(times/60%60);
            m = m > 10? m : "0" + m;
            minute.innerHTML = m;
            var s = parseInt(times%60);
            s = s> 10? s : "0" + s;
            second.innerHTML = s;
        }
    </script>

 清除setInterval定时器

    <button class="begin">开启定时器</button>
    <button class="stop">停止计时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var time = null;//全局变量
        begin.addEventListener('click', function(){
            time = setInterval(function(){
                console.log('开启定时器了');
            },1000)
        })
        stop.addEventListener('click' ,function(){
            clearInterval(time);
        })
    </script>

发送短信案例 

    手机号：
    <input type="number">
    <button>发送</button>

    <script>
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var time = 3;   
        btn.addEventListener('click' ,function(){
            btn.disabled = true;
             var dsq = setInterval(function(){
                if (time == 0) {
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    clearInterval(dsq);
                    time = 3;
                }else {
                    btn.innerHTML = '还剩' + time + '秒';
                    time--;

                }
            },1000)
        })
    </script>

this指向问题

    <button>点击</button>

    <script>
    //this指向问题 一般情况下this的最终指向的是那个调用它的对象

    //1.全局作用域或者普通函数中的this指向全局对象window
    console.log(this);

    function fn() {
        console.log(this);
    }
    fn();

    setTimeout(function(){
        console.log(this);
    },1000)
    //2.方法调用中谁调用this指向谁  
    var o = {
        sayHi: function () {
            console.log(this);//this指向o对象
        }
    }
    o.sayHi();

    var btn =document.querySelector('button');
    btn.onclick =function () {
        console.log(this);//button按钮
    }

    btn.addEventListener('click',function(){
        console.log(this);//button按钮
    })
    //3.构造函数中this指向构造函数的实例
    function Fun() {
        console.log(this);//Fun
    }
    var fun = new Fun();
    </script>

 js的执行机制

    <script>
        //第一个问题132
        console.log(1);//同步任务

        setTimeout(function () {
            console.log(2);
        }, 3000)//回调函数：异步任务

        console.log(3);

        //第二个问题132
        console.log(1);

        setTimeout(function () {
            console.log(2);
        }, 0)

        console.log(3);
    </script>

5秒后自动跳转

    <button>点击</button>
    <div></div>
    <script>
        //点击按钮跳转百度
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // console.log(location.href);
            location.href = 'https://www.baidu.com/';
        })

        //过五秒自动跳转
        var time = 5;
        var div = document.querySelector('div');
        setInterval(function () {
            if (time != 0) {
                div.innerHTML = '还剩' + time + '秒跳转百度';
                time--;
            }else {
                location.href = 'https://www.baidu.com/'
            }
        }, 1000)
    </script>

 获取URL参数

 

login页面

    <form action="index.html">
        用户名：<input type="text" name="umane">
        <input type="submit" value="登录">
        
    </form>

index页面

    <div></div>
    <script>
        console.log(location.search);//?umane=lwj
        //1.先去掉？  substr('起始位置'，截取几个字段);
        var params = location.search.substr(1);//从索引为1开始，截取到最后
        console.log(params);//umane=lwj
        //2. 利用=把字符串分割成数组 split('=');
        var arr = params.split('=');
        console.log(arr);//['umane', 'lwj']
        var div = document.querySelector('div');
        //把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>

login

 index

 location的常用方法

    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click' ,function () {
            //跳转百度 assgin分配 记录浏览历史，可以后退
            // location.assign('http://www.baidu.com/')
            //reolace替代 不记录浏览历史 不可后退
            // location.replace('http://www.baidu.com/');
            //reload重新加载  点了相当于刷新
            location.reload('http://www.baidu.com/');
        })
    </script>

 navigator

 history对象

 首页

    <a href="30history跳转页面.html">点我前进</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            // history.forward()
            history.go(1)
        })
    </script>

跳转页：

    <a href="30history对象.html">点我前进</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            // history.back()
            history.go(-1);
        })
    </script>