1.BOM概述.
-
BOM:浏览器对象模型(Browser Object Model),它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。BOM是把「浏览器」当做一个「对象」来看待。
-
BOM对象分为window对象和window子对象(screen、location、history、navigator)。
-
BOM 的顶级对象是 window;
-
BOM 学习的是浏览器窗口交互的一些对象;
-
BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差。
-
BOM 比 DOM 更大,它包含 DOM。BOM的组成部分如下:
![](https://img-blog.csdnimg.cn/69c1b238bbc74aaf94b476307ceb9dd7.jpeg)
2.windows对象.
2.1window对象介绍.
2.2常用事件.
2.2.1窗口加载事件-onload.
![](https://img-blog.csdnimg.cn/52168f45044e4f7aa7c75991928befba.jpeg)
2.2.2窗口大小改变事件-onresize.
![](https://img-blog.csdnimg.cn/2316f86556e04da7a87134269c2da66a.jpeg)
2.3常用方法.
2.3.1open('URL').
2.3.2close().
2.3.3定时器和延时器.
-
setInterval(参数1,参数2):定时器也叫计时器:按照设定的时间间隔循环往复执行程序。
-
clearInterval():清除定时器-setInterval();
-
setTimeout(参数1,参数2):延时器,按照设定的时间间隔延迟执行程序,只会执行一次。
-
cleanTimeout():清除延时器-setTimeout();
3.window子对象.
3.1screen对象.
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地址和端口号:
-
hostname:返回不带端口号的服务器名称/IP地址:
-
port:返回服务器端口号:
-
pathname:返回URL中的目录名和页面名:
-
protocol:返回页面使用的协议(http:或https:):
-
常用方法:
-
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个页面;
4.案例演示.
4.1时钟案例.
![](https://img-blog.csdnimg.cn/59c0b95736924d479c248dd7a796095a.jpeg)
![](https://img-blog.csdnimg.cn/c43a08092d9c41719fa5e210ec5c4e5c.jpeg)
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方法。
![](https://img-blog.csdnimg.cn/3d01ee3a481a4d43a700799cc8a2513b.jpeg)
4.3文字展示案例.
![](https://img-blog.csdnimg.cn/0acc79ab8b1446e299cd829c12c84dc5.jpeg)
4.4图片轮换案例.
![](https://img-blog.csdnimg.cn/b0d2e8b2ad06436a8e0b288d28167f4e.jpeg)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)