BOM 浏览器对象模型,把浏览器当做一个对象来看待,Bom顶级对象是window,bom主要是用于浏览器窗口的一些交互对象,
bom是各个浏览器厂商规定,兼容性较差
<!-- 1.定时器 -->
setTimeout(callback, 3000) //开启定时器 因定时器可能挺多,经常加一个别名
clearTimeout('定时器名称') //停止定时器
setInterval(callback, 3000) //闹钟定时器 每隔这个延时时间 重复调用
clearInterval(闹钟名称) //停止定时器
<script>
setTimeout(function() { console.log('时间到了'); }, 4000);
console.log('爆炸了');
function callback() { }
var timer = setTimeout(function() { console.log('ok'); }, 2000); //加别名timer
btn.addEventListener('click', function() {
clearTimeout(timer); // 停止定时器
})
</script> //打印顺序: 爆炸了 时间到了 ok
<script>
setInterval(function() { console.log('继续输出'); }, 1000); //闹钟
</script>
<!-- 2.节流阀 -->
开始设置一个变量var flag= true;
If(flag){flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true
打开水龙头
<!-- 顶级对象window -->
它是一个全局对象, 定义在全局作用域中的变量和函数都会变成window对象的属性和方法,在调用时可省略window
alert(11); //等价于 window.alert(11)
var name = 10; console.log(window.name);
function fn() { console.log(11);} window.fn();
<!-- window对象的常见事件 -->
<!-- 页面（窗口）加载事件: -->
window.onload = function(){} 或 window.addEventListener("load", function(){})
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等), 就调用的处理函数。
有了window.onload就可以把js代码写到页面元素上方,因为onload是等页面内容全部加载完毕,再去执行处理函数
window.onload传统注册事件方式只能写一次,如果有多个,以最后一个window.onload为准.
window.addEventListener则没有限制
document.addEventListener('DOMContentLoaded', function() { })
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
都可以把js代码提前
<head> <script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() { alert('点击我');})
})
window.addEventListener('load', function() { alert(22); })
document.addEventListener('DOMContentLoaded', function() { alert(33); })
</script> </head>
<body> <button>点击</button> </body>
<!-- 调整窗口大小事件: -->
window.onresize = function(){}
window.addEventListener("resize",function(){})
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
只要窗口大小发生像素变化，就会触发这个事件。经常利用这个事件完成响应式布局 window.innerWidth 当前屏幕的宽度
<script>
window.addEventListener('resize', function() {
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
</script>
<!-- navigator对象 -->
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转:
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|
JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机 //window.location.href = "../H5/index.html"; //手机页面
} else {
window.location.href = ""; //电脑
}
<!-- 元素偏移量 offset 系列 -->
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
1. 获得元素距离带有定位父元素的位置
2. 获得元素自身的大小（宽度高度）
3. 注意：返回的数值都不带单位
4.我们想要获取元素大小位置，用offset更合适
element.offsetParent 返回该元素带有定位父级元素,如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding border 内容区的宽度, 返回值不带单位 //是只读属性，只能获取不能赋值
element.offsetHeight 返回自身包括padding 边框 内容区的高度, 返回值不带单位
<script>
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y; //获取最新鼠标的坐标
})
</script>
<!-- 元素可视区 client 系列 -->
通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
element.clientTop 返回元素上边框大小
element.clientLeft 返回元素左边框大小
element.clientWidth 返回自身padding + 内容区width宽度, 不含边框,返回值不带单位
element.clientHeight 返回自身padding + 内容区的高度, 不含边框,返回值不带单位
<script>
// client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
var div = document.querySelector('div');
console.log(div.clientWidth);
</script>
<!-- 元素滚动 scroll 系列 -->
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等
element.scrollTop 返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth 返回自身实际宽度,不含边框,返回数值不带单位
element.scrollHeight 返回自身实际高度,不含边框,返回数值不带单位
页面被卷去的头部:
当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件
<script>
var div = document.querySelector('div');
console.log(div.scrollHeight); //盒子的高度,不带边框
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function() {
console.log(div.scrollTop); //被卷去的距离
})
</script>
页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset
注意: 元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
页面被卷去的头部兼容性解决方案:
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left
<!-- 动画函数封装 -->
缓动效果原理:
1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
4. 注意步长值需要取整
动画函数多个目标值之间移动:
可以让动画函数从 800 移动到 500。
当我们点击按钮时候，判断步长是正值还是负值
1.如果是正值，则步长往大了取整
2.如果是负值，则步长 向小了取整
动函数添加回调函数:
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，
再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置。
<!-- 本地当前页面刷新 -->
window.location.reload()