第八章.Bom浏览器模型

一、window对象常用的方法

window.open('地址'，'名称','高','宽');//打开一个新的窗口

window.alert();//提示框或者警告框

window.prompt();//用户输入提示框

window.confirm();//显示带有 确认与取消按钮框

window.close();//关闭浏览器窗口

window.setTimeout();//指定毫秒数后调用函数，定时器

clearTimeout（）；清除定时器括号里面是定时器的名称

window.setInterval();//指定的周期调用函数 延时重复使用

(一)、定时器开启setTimeout

 // setTimeout

        // 语法 window.setTimeout(调用函数，延时时间);

        // 1秒等于1000毫秒

        // 1.这个window在调用的时候可以省略

        // 2.这个延时时间单位是毫秒但是可以省略，如果省略默认的是0

        // 3.这个调用函数可以直接写函数还可以写函数名

        // 4.页面中可能有很多的定时器，我们经常给定时器加标识符

        // setTimeout(function () {

        //     console.log('时间到了');

        // }, 2000);

        function all() {

            console.log("要爆炸了");

        }

      var time1=window.setTimeout(all, 3000);

      var time2=window.setTimeout(all, 5000);

 

 

（二）、定时器关闭clearTimeout

// 方法一

    var btn = document.querySelector('button');

    var time = window.setTimeout(function () {

        console.log("停止");

    }, 5000)

    btn.addEventListener('click', function () {

        clearTimeout(time);

    })

    // 方法二

    // 声明一个函数

    function time() {

        console.log("你好呀");

    }

    // 定时器调用函数名

    var time3 = window.setTimeout(time, 5000);

    btn.addEventListener('click', function () {

        // time3 定时器的名字

        clearTimeout(time3);

    })

 

 

（三）、开启定时器setInterval，关闭定时器clearInterval

    // setInterval 重复

        // 语法 ：window.setInterval(调用函数,延时时间);

        setInterval(function () {

            console.log("继续输出");

            // 每隔1000秒就会调用回调函数

        }, 1000);

        //setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束这个定时器

        //setInterval 每隔这个延时时间，就会去调用这个回调函数，会调用很多次，重复调用这个函数

   

//案列3：

    // 定时函数：间隔时间执行某个函数 调用上面函数

    // 在外面定义一个全局变量 getTime调用里面的函数

    // let t1 = window.setInterval("getTime()", 1000);

    console.log(t1);

    // 创建的定时器任务的编号

    // 开启定时器

    function beginTime() {

      let  t1 = setInterval("getTime()", 1000);

    }

    // 关闭定时器

    function closeTime() {

        clearInterval(t1);

    }

    //  使用js来操作你的网页元素,将获取的事件显示在网页好h1标签里面

    // 1.获取事件 new Date()

    // 2.获取网页元素 document.getElementById()

    // 3.innerHTml填充网页文本

    // 显示当前时间 创建一个函数

    function getTime() {

        // 创建一个时间对象函数

        let time = new Date();

        // 把date部分日期转换为字符串

        let yearMonthDay = time.toLocaleDateString();

        // 把date部分时间转换为字符串

        let hourMinSec = time.toLocaleTimeString();

        // 以下获取的是数组

        let h10bj = document.getElementsByTagName('h1')[0];

        // 拼接日期和时间

        h10bj.innerHTML = yearMonthDay + " " + hourMinSec;

    }

 

 

二、history对象常用的方法

history.back();//后退

history.go(-1);//也是后退

history.forward();//前进

history.go(1);//前进

 

 

三、location对象常用的方法

location.href();//页面跳转

location.reload();//刷新，重新加载

location.replace();//用新的文档替换当前文档

location.host();//返回主机名和URL的端口号

location.hostname();//返回当前URL的主机名

 

四、调整窗口大小事件

// addEventListener 页面加载完毕在执行里面的代码

        window.addEventListener('load',function() {

          // 获取元素

          var div=document.querySelector('div');

         // 只要窗口大小发生变化就会触发函数体的代码

         window.addEventListener('resize',function() {

             console.log(window.innerWidth);

             console.log('有变化');

             if(window.innerWidth<=800){

                 div.style.display = "none";

             }else {

                div.style.display = "block";

             }

         })

        })

 

五、窗口事件加载

    // 写多个弹框可以用addEventListener方法

    window.addEventListener('load', function () {

        var btn = document.querySelector('button');

        btn.addEventListener('click', function () {

            alert('点击我');

        })

    })

   

    // load等页面内容全部加载完毕，包含页面dom元素图片flashCSS 等等

    window.addEventListener('load',function() {

        alert('点击他');

    })

    // DOMContentLoaded是DOM加载完毕，不包含图片falsh css等就可以执行加载速度比load更快些

    window.addEventListener('DOMContentLoaded',function() {

        alert(33);

    })