简介：

BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。

1、BOM结构

2、window对象

名称	描述
`open()`	打开一个新浏览器窗口
`alert()`	显示警告框
`close()`	关闭当前浏览器窗口
`scrollTo()`	可把内容滑动到指定坐标
`scrollBy()`	可将内容滑动指定的距离（相对于当前位置）
`innerWidth`	返回窗口的网页显示区域宽度
`innerHeight`	返回窗口的网页显示区域高度

2.1 open(url, name, features, replace)

url: 打开指定页面的url，如果没有则打开空白页
- name: 指定target属性或窗口名称，支持以下值：
  - _blank –- url加载到新窗口（默认）
  - _parent –- url加载到父框架
  - _self –- url替换当前页面
  - _top –- url替换任何可加载的框架集
  - name -- 窗口名称
features: 设置新打开窗口的功能样式（如：width=500）
replace
- true –- url替换浏览历史中的当前条目
- false –- 在浏览历史中创建新条目

// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500')

2.2 scrollTo(xpos, ypos)

xpos：距离网页左上角x坐标
ypos：距离网页左上角y坐标

<style>
  .box { height: 3000px; }
</style>
<div class="box">
  <p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {
    scrollTo(0, 500) // 页面加载后，滚动到距离顶部500px
  })
</script>

3、location对象

名称	描述
`href`	返回当前完整网址
`host`	返回主机名和端口号，通常指完整域名
`protocol`	返回网址协议
`port`	返回端口号
`pathname`	返回网址路径部分
`search`	返回网址中的?及?后的字符串（查询部分），通常指查询参数
`hash`	返回网址中的#及#后的字符串，通常指锚点名称
`assign(url)`	在当前页面打开指定新url（增加浏览记录）
`reload()`	重新加载当前页面
`replace(url)`	打开新url替换当前页面（替换当前浏览记录）

3.1 获取网址信息

// 以https://www.csdn.net/nav/python?param1=111&param2=222#first为例，
查看输出结果
console.log(location.href)

// “https://www.csdn.net/nav/python?param1=111&param2=222#first” 
console.log(location.host)        // “www.csdn.net”

console.log(location.protocol)    // “https://”

console.log(location.pathname)  // “/nav/python”

console.log(location.search)     // “?param1=111&param2=222”

console.log(location.hash)       // “#first”

3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url

location.href = 'https://www.csdn.net'

4、history对象

名称	描述	示例
`back()`	返回历史记录的上一个url	`history.back()`
`forward()`	返回历史记录的下一个url	`history.forward()`
`go(n)`	返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页	`history.go(-1)` `history.go(1)`

5、navigator对象

名称	描述
`platform`	返回操作系统类型
`userAgent`	返回用户代理头的值

navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核

6、screen对象

名称	描述
`availWidth`	返回屏幕的宽度（不包括windows任务栏）
`availHeight`	返回屏幕的高度（不包括windows任务栏）
`width`	返回屏幕的总宽度
`height`	返回屏幕的总高度

BOM 定时器

1、定时器方法

方法名	定义	清除定时器方法
`setTimeout()`	指定的毫秒数后调用函数或计算表达式	`clearTimeout()`
`setInterval()`	按照指定的周期（毫秒）来调用函数或计算表达式	`clearInterval()`

1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)

示例：

<p class="info"></p>
<button class="btn">清除定时器</button>
<script>
  var info = document.querySelector('.info')
  var btn = document.querySelector('.btn')
  var t1 = setTimeout(function() {
    info.innerHTML = '已经5秒了'
  }, 5000);
  // 点击按钮可清除定时器
  var btn = document.querySelector('.btn')
  btn.addEventListener('click', function() {
    clearTimeout(t1)
    info.innerHTML = '定时器已清除'
  })
</script>

1.2 setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)

<p class="info"></p>
<script>
  var info = document.querySelector('.info')
  var num = 0
  var t1 = setInterval(function() { // 每隔1秒显示当前时间，5次后停止
    info.innerHTML = '当前时间：' + String(new Date())
    if (num >= 4) { clear() }
    num++
  }, 1000)
  // 清除定时器
  function clear() {
    clearInterval(t1)
    info.innerHTML = '定时器已清除'
  }
</script>

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .s_box,.b_box{width:400px;height:300px;position: absolute;top:0;}
        .s_box{left:0;}
        .s_box img{width: 400px;height: 300px;}
        .s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}

        .b_box{left:500px;display: none;overflow: hidden}
        .b_box img{width: 1200px;height: 900px;position: absolute;left: 0;top: 0;}
    </style>
</head>
<body>
<div class="s_box">
    <img src="../../img/派大星.jpeg" alt="">
    <span></span>
</div>
<div class="b_box">
    <img src="../../img/派大星.jpeg" alt="">
</div>
</body>
<script>
    // OOP:编程
    function Magnifier(){
        // 1.选元素
        this.sBox = document.querySelector(".s_box");
        this.span = document.querySelector(".s_box span");
        this.bBox = document.querySelector(".b_box");
        this.bImg = document.querySelector(".b_box img");
        // 2.绑定事件
        this.init()
    }
    Magnifier.prototype.init = function(){
        var that = this;
        // 进入
        this.sBox.onmouseover = function(){
            // 3-1.显示，计算span的宽高
            that.show()
        }
        // 离开
        this.sBox.onmouseout = function(){
            // 3-2.隐藏
            that.hide()
        }
        // 移动
        this.sBox.onmousemove = function(eve){
            var e = eve || window.event;
            // 5.span跟随鼠标
            that.move(e)
        }
    }


    Magnifier.prototype.show = function(){
        // 显示，计算span的宽高
        this.span.style.display = "block";
        this.bBox.style.display = "block";


        this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }

    Magnifier.prototype.hide = function(){
        // 隐藏
        this.span.style.display = "none";
        this.bBox.style.display = "none";
    }

    Magnifier.prototype.move = function(e){
        // 计算移动的距离
        var l = e.clientX - this.span.offsetWidth/2;
        var t = e.clientY - this.span.offsetHeight/2;
        console.log(this.sBox.offsetTop);
        //  边界限定
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.sBox.offsetWidth - this.span.offsetWidth){
            l=this.sBox.offsetWidth - this.span.offsetWidth
        }
        if(t>this.sBox.offsetHeight - this.span.offsetHeight){
            t=this.sBox.offsetHeight - this.span.offsetHeight
        }
        //  span跟随鼠标
        this.span.style.left = l + "px";
        this.span.style.top = t + "px";

        //  计算比例
        // 当前值 / 总值，得到的就是比例
        var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
        var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);


        //  根据比例计算右边大图应该移动的距离
        // 比例 * 总值，得到的就是当前应该移动的距离
        this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
        this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
    }

    new Magnifier();
</script>
</html>