Javascript——BOM(浏览器)的若干对象的属性和方法

BOM：
Browser Object Model 浏览器对象模型

window对象是浏览器的顶级对象，是JS访问浏览器窗口的一个接口，它是一个全局对象，定义在全局作用域中的变量/函数都会变成window对象的属性和方法。调用的时候可以忽略window，对话框方法都属于window对象方法，如alert()/prompt()等。

窗口加载事件

    window.onload=function(){}或window.addEventListener("load",function(){});

window.onload是窗口（页面 ）加载事件，当文档内容完全加载完成会触发该事件（包括图像/脚本文件/CSS文件等）就调用的处理函数。

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

load等页面内容全部加载完毕，包含页面dom元素/图片/flash/css等
DOMContentLoaded是DOM加载完毕，不包含图片/flash/css等就可以执行，加载速度比load更快一些。

调整窗口大小事件

window.onresize=function(){}
window.addEventListener("resize",function(){});

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意：
1.只要窗口大小发生像素变化，就会触发这个事件。
2.经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

location对象
console.log(window.location);

地址栏上的#及后面的内容：console.log(window.location);
主机名及端口号：console.log(window.location.host);
主机名：console.log(window.location.hostname);
文件路径：相对路径：console.log(window.location.pathname);
端口号：console.log(window.location.port);
协议：console.log(window.location.protocol);
搜索的内容：console.log(window.location.search);

    <script>
        onload=function(){
            document.getElementById("btn").onclick=function () {
                //设置跳转的页面地址
                location.href="http://www.jd.com";//属性
                location.assign("http://www.jd.com");//方法
                location.reload();//重新加载
                location.replace("http://www.jd.com");//没有历史记录
            };
        };
    </script>

history对象没啥用

<input type="button" value="跳过" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script>
    //跳转的
    my$("btn1").onclick=function(){
        window.location.href="15test.html";
    };
    //前进
    my$("btn2").onclick=function(){
        window.history.forward();
    };
</script>

navigator对象

<script>
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型
    console.log(window.navigator.platform);
</script>

定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
window在调用的时候可以省略，延时时间单位是毫秒，但是可以省略，如果省略默认是0。
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
setTimeout(function(){},2000);
这个调用函数可以直接写函数，或者写函数名或者采取字符串’函数名()'三种形式。第三种不推荐。

停止定时器
window.clearTimeout(timeoutID)

<button>点击停止定时器</button>
<script>
    var btn=document.querySelector('button');
    var timer=setTimeout(function(){
        console.log('爆炸');
    },5000);
    btn.addEventListener('click',function(){
        clearTimeout(timer);
    })
</script>

setInterval
参数1：函数
参数2：时间——毫秒——1000毫秒——1秒
执行过程：页面加载完毕后，过了1秒，执行一次函数代码，又过了1秒再次执行函数
返回值就是定时器的id值

<input type="button" value="停止" id="btn"/>
<script>
    var timeID=setInterval(function(){
        alert("hello");//断言
    },1000);
    document.getElementById("btn").onclick=function(){
        //点击按钮，停止定时器
        //参数：要清理的定时的id的值
        window.clearInterval(timeID);
    };
</script>

setTimeout延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

开启/停止定时器

        <button class="begin">开启定时器</button>
        <button class="stop">停止定时器</button>
        <script>
            var begin = document.querySelector('.begin');
            var stop = document.querySelector('.stop');
            var timer = null; //全局变量 null是一个空对象
            begin.addEventListener('click', function() {
                timer =  setInterval(function() {
                    console.log('你好呀');
                },1000);
            })
            stop.addEventListener('click',function(){
                clearInterval(timer);
            })
        </script>

发送验证码：
按钮点击之后，会禁用disabled为true
同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
里面秒数是有变化的，因此需要用到定时器
定义一个变量，在定时器里面，不断递减
如果变量为0说明到了时间，需要停止定时器，并且复原按钮初始状态

    <script>
        var btn = document.querySelector('button');
        var time = 1; //定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    //清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        })
    </script>