BOM 浏览器对象模型

1. BOM 概述

2.window 对象的常见事件

窗口加载事件

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

document.addEventListener('DOMContentLoaded',function(){})

调整窗口大小事件

window.onresize = function(){}

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

3.定时器

setTimeout() 定时器

 setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

案例：5秒后自动关闭的广告

核心思路：5秒之后，就把这个广告隐藏起来
用定时器setTimeout

<img src="image/1_waifu2x.png" alt="" class="ad">
    <script>
        var ad=document.querySelector('.ad');
        setTimeout(function(){
            ad.style.display='none';
        },5000);
    </script>

停止 setTimeout() 定时器

 window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
1.window 可以省略。
2.里面的参数就是定时器的标识符 。

setInterval() 定时器

 window.setInterval(回调函数, [间隔的毫秒数]);

案例：倒计时

//1.获取元素
var hour=document.querySelector('.hour');//小时的黑色盒子
var minute =document.querySelector('.minute');//分钟的黑色盒子
var second =document.queryselector(.second');//秒数的黑色盒子
var inputTime =+new Date('2019-5-118:00:00');//返回的是用户输入时间总的毫秒数countDown);
//我们先调用一次这个函数,防止第一次刷新页面有空白
//2.开启定时器
	setInterval(countDown,1000);
function countDown(){
	var nowTime =+new Date();//返回的是当前时间总的毫秒数
	var times =(inputTime-nowTime)/1000;//times是剩余时间总的秒数
	var h=parseInt(times/60/60%24);//时
	h=h<10?"0'+h:h;
	hour.innerHTML=h;//把剩余的小时给小时黑色盒子
	var m=parseInt(times /60%60);//分
	m=m<10?"0'+m:m;
	minute.innerHTML=m;
	var s =parseInt(times %60);//当前的秒
	s=s<10?'0'+S:s;
	second.innerHTML=s;}

停止 setInterval() 定时器

 window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
注意：
1.window 可以省略。
2.里面的参数就是定时器的标识符 。

案例：发送短信

this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
现阶段，我们先了解一下几个this指向

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

4. JS 执行机制

123

5. location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象

URL

location对象属性

location对象的方法

案例： 5秒钟之后自动跳转页面

利用定时器做倒计时效果
时间到了，就跳转页面。 使用 location.href

案例： 获取 URL 参数数据

6. navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

7. history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。