1.BOM概述.
- BOM：浏览器对象模型（Browser Object Model），它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。BOM是把「浏览器」当做一个「对象」来看待。
- BOM对象分为window对象和window子对象（screen、location、history、navigator）。
- BOM 的顶级对象是 window；
- BOM 学习的是浏览器窗口交互的一些对象；
- BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差。
- BOM 比 DOM 更大，它包含 DOM。BOM的组成部分如下：
2.windows对象.
2.1window对象介绍.
- window对象是BOM顶层对象；
- window对象是JS访问浏览器窗口的一个接口；
- window对象是一个全局对象,声明的所有的全局变量和全局方法函数最终都是window对象的属性或者方法，在调用的时候可以省略 window。前学习的alert()、prompt()、confirm()方法都属于window对象的。
2.2常用事件.
2.2.1窗口加载事件-onload.
2.2.2窗口大小改变事件-onresize.
2.3常用方法.
2.3.1open('URL').
- open('URL') ：打开一个新的浏览器窗口。参数1：URL地址，参数2：_blank(URL加载到一个新的窗口,默认)；_self(URL替换当前页面)。
2.3.2close().
- close() ：关闭新打开的窗口（仅能关闭通过open方法打开的窗口，且open方法的参数2为_blank）。
2.3.3定时器和延时器.
- setInterval(参数1,参数2)：定时器也叫计时器：按照设定的时间间隔循环往复执行程序。
- 参数1：执行的函数程序，可以是匿名函数或者函数名。
- 匿名函数：window.setInterval(()=>console.log('哈哈'),100)；
- 函数名,不带括号：window.setInterval(fe,100);
- 函数名,带括号：window.setInterval('fe()',100);
- 参数2：时间间隔，单位：毫秒。
- clearInterval()：清除定时器-setInterval()；
- let ia = window.setInterval(()=>console.log('哈哈'),100)；
- cleanInterval(ia);
- setTimeout(参数1,参数2)：延时器，按照设定的时间间隔延迟执行程序，只会执行一次。
- 参数1：执行的函数程序，可以是匿名函数或者函数名。
- 参数2：时间间隔，单位：毫秒。
- cleanTimeout()：清除延时器-setTimeout();
- let ta =window.cleanTimeout(()=>console.log('哈哈'),100)；
- cleanInterval(ta);
3.window子对象.
3.1screen对象.
- screen对象 ：包含显示设备的信息；
- 常用属性：screen.height、screen.width：返回设备的分辨率。如：
- let fb = ()=> alert(`高度:${screen.height},宽度:${screen.width}`);
3.2location对象.
- 常用属性：
- href：设置或者获取 URL。
- 获取当前页面的URL地址：let fb = ()=> alert(`获取当前页面的URL:${location.href}`);
- 跳转到百度页面：let fc = ()=> location.href='http://www.baidu.com'。
- 也可以通过行内js代码跳转页面：<a href="javascript:location.href='test01.html'">跳转到test01.html</a>；
- host：获取当前服务器名称/IP地址和端口号：
- let fb = ()=> alert(`服务器名称/IP地址和端口号：${location.host}`);
- hostname：返回不带端口号的服务器名称/IP地址：
- let fb = ()=> alert(`服务器名称/IP地址：${location.host}`);
- port：返回服务器端口号：
- let fb = ()=> alert(`服务器端口号：${location.port}`);
- pathname：返回URL中的目录名和页面名：
- let fb = ()=> alert(`当前URL的目录名和页面名：${location.pathname}`);
- protocol：返回页面使用的协议(http:或https:)：
- let fb = ()=> alert(`当前URL的协议：${location.protocol}`);
- 常用方法：
- reload()：重新加载页面/刷新页面。
- 不带参数相当于刷新按钮或者f5，location.reload();
- 如果参数为 true则是强制刷新，想等于按钮ctrl+f5。location.reload(true);
- 也可以通过行内js代码实现：<a href="javascript:location.reload()">刷新本页</a>。
- assign()：和href一样，可以跳转页面。location.assign('http://www.baidu.com');
- replace()：替换当前页面，因为不记录历史，所以不能后退页面。location.replace('http://www.baidu.com');
3.3history对象.
- history.back()：无参，后退，和浏览器左上角的后退按钮相同；
- history.forward()：无惨，前进，和浏览器左上角的前进按钮相同；
- history.go(参数)：当参数是1的时候，表示前进一个页面，等同于 forward；如果参数是-1，表示后退一个页面，等同于back函数。如果是N或者-N则前进或后退N个页面；
- 以上方法在执行的时候页面必须有历史跳转记录，也就是跳转过至少一次获N次。
4.案例演示.
4.1时钟案例.
- 日期格式转换成本地时间格式：
4.2随机数案例.
- 在 js里面 Math.random() 是在 0-1范围之内随机产生一个浮点型数字(不包含0和1)，产生的最大值是0.999999999999999999；
- Math.random()*9 是在 0-9范围之内随机产生一个浮点型数字(不包含0和9)，产生的最大值是8.999999999999999。如果再对 Math.random()*9 进行四舍五入取整，如：Math.round(Math.random() * 9);，那么就是在 0-9 范围之内随机产生一个数字。
- 补充：toFixed()，作用是保留指定小数位，有四舍五入。如：alert(1.5326.toFixed(3)); 保留小数位后3位数，结果是：1.533。如果是整数，则要先赋给变量，再调用 toFixed方法，不能直接用整数调用 toFixed方法。
4.3文字展示案例.
4.4图片轮换案例.
