BOM编程

1.BOM概述.

1. BOM：浏览器对象模型（Browser Object Model），它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。BOM是把「浏览器」当做一个「对象」来看待。

2. BOM对象分为window对象和window子对象（screen、location、history、navigator）。

3. BOM 的顶级对象是 window；

4. BOM 学习的是浏览器窗口交互的一些对象；

5. BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差。

6. 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定时器和延时器.

1. setInterval(参数1,参数2)：定时器也叫计时器：按照设定的时间间隔循环往复执行程序。

   • 参数1：执行的函数程序，可以是匿名函数或者函数名。

     • 匿名函数：window.setInterval(()=>console.log('哈哈'),100)；

     • 函数名,不带括号：window.setInterval(fe,100);

     • 函数名,带括号：window.setInterval('fe()',100);

   • 参数2：时间间隔，单位：毫秒。

2. clearInterval()：清除定时器-setInterval()；

   • let ia = window.setInterval(()=>console.log('哈哈'),100)；

   • cleanInterval(ia);

3. setTimeout(参数1,参数2)：延时器，按照设定的时间间隔延迟执行程序，只会执行一次。

   • 参数1：执行的函数程序，可以是匿名函数或者函数名。

   • 参数2：时间间隔，单位：毫秒。

4. 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对象.

• 常用属性：

  1. 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>；

  2. host：获取当前服务器名称/IP地址和端口号：

     • let fb = ()=> alert(`服务器名称/IP地址和端口号：${location.host}`);

  3. hostname：返回不带端口号的服务器名称/IP地址：

     • let fb = ()=> alert(`服务器名称/IP地址：${location.host}`);

  4. port：返回服务器端口号：

     • let fb = ()=> alert(`服务器端口号：${location.port}`);

  5. pathname：返回URL中的目录名和页面名：

     • let fb = ()=> alert(`当前URL的目录名和页面名：${location.pathname}`);

  6. protocol：返回页面使用的协议(http:或https:)：

     • let fb = ()=> alert(`当前URL的协议：${location.protocol}`);

---

• 常用方法：

  1. reload()：重新加载页面/刷新页面。

     • 不带参数相当于刷新按钮或者f5，location.reload();

     • 如果参数为 true则是强制刷新，想等于按钮ctrl+f5。location.reload(true);

     • 也可以通过行内js代码实现：<a href="javascript:location.reload()">刷新本页</a>。

  2. assign()：和href一样，可以跳转页面。location.assign('http://www.baidu.com');

  3. replace()：替换当前页面，因为不记录历史，所以不能后退页面。location.replace('http://www.baidu.com');

---

3.3history对象.

1. history.back()：无参，后退，和浏览器左上角的后退按钮相同；

2. history.forward()：无惨，前进，和浏览器左上角的前进按钮相同；

3. 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图片轮换案例.