HTML--BOM window对象（实例：放大镜）
简介：
BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。
1、BOM结构
window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法
使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同
2、window对象
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 –- 在浏览历史中创建新条目
// 新窗口打开首页 open(https://www..net/) // 当前窗口打开首页 open(https://www..net/, _self) // 新窗口打开首页，并设置窗口宽高500px open(https://www..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对象
location对象包含当前url信息，经常用于网址判断，url跳转
3.1 获取网址信息
// 以https://www..net/nav/python?param1=111¶m2=222#first为例， 查看输出结果 console.log(location.href) // “https://www..net/nav/python?param1=111¶m2=222#first” console.log(location.host) // “www..net” console.log(location.protocol) // “https://” console.log(location.pathname) // “/nav/python” console.log(location.search) // “?param1=111¶m2=222” console.log(location.hash) // “#first”
3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url
location.href = https://www..net
4、history对象
history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转
5、navigator对象
navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性
判断是否为谷歌内核：
navigator.userAgent.toLowerCase().indexOf(chrome) // 返回-1时不是chrome内核，大于-1时是chrome内核
6、screen对象
screen对象包含用户屏幕的信息
BOM 定时器
1、定时器方法
1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)
setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;
定时器到期时，可以通过setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;
定时器清除方法clearTimeout(id)，id为setTimeout()的返回值;
示例：
<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…)
语法与setTimeout()相似，区别是setInterval()第二个参数为运行间隔;
由于setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;
示例：
<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>