BOM 浏览器对象模型
BOM 的概念
- BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成,其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象,其他对象都是该对象的子对象(document对象也是window的子对象)。
- 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,比如:刷新浏览器、后退、前进、在浏览器中输入URL等。
window 对象
- window 是浏览器的顶级对象,当调用 window 下的属性和方法时,可以省略 window。
- 在全局作用域定义的全局变量,都是window的一个属性,可以打点调用。
var age = 20; window.age;
- 注意:window下两个特殊的属性 window.name、window.top。
- window.name 如果定义新的变量,会在原来的name属性上赋值,并且只能是字符串格式的值,所以全局变量名不要设置成name(局部作用域可以使用)。
- window.top 它的属性值指向的就是顶层对象 window。这条属性是只读的,后期也无法更改。
对话框
- 警示框 alert()
alert("hello");
- 提示框 prompt(),有返回值,返回值是字符串格式的输入的内容。
prompt("请输入数字",12);
- 让用户进行确认或取消选择的对话框 confirm(),有返回值,点击确定返回true,点击取消返回false。
confirm("您确认删除这条数据么");
加载事件
onload 事件
- 我们可以给 window 对象或者
<img>
等元素添加 onload 加载事件,表示只有绑定事件的元素加载完毕才能触发事件,才能执行事件函数。 - 其中 window 对象加载完毕:指的是所有HTML结构加载完,并且外部引入资源(js、css、img、 视频)也加载完毕。
window.onload=function(){
.....
}
应用
- 利用 window.onload 事件,可以将 js 代码提前到 html 结构之前。
- 注意:一个页面中只能有一个 window.onload 事件。
延时器
- 延时器是 window 对象的一个方法,类似于定时炸弹
- 语法:window.setTimeout(func,time);
- 第一个参数:延时执行的函数,可以是匿名函数定义,或者是一个函数名的引用,注意不要加 () 。
- 第二个参数:延时的时间,以毫秒计数,不需要写单位。1000 毫秒等于 1 秒。
- 功能:在指定的时间后,延迟执行一个函数
- 注意:将延时器存储到一个变量中,便于后期清除调用。
//两秒后打印boom
var timeout = window.setTimeout(function(){
console.log("boom");
},2000);
//异步语句 setTimeout就是异步加载:它的等待不会影响后面内容的加载
//同步语句:一个一个加载
清除延时器
- window 对象的一个方法
- 语法:window.clearTimeout(timeout);
- 参数:需要清除的延时器变量名。
- 功能:清除指定的延时器。
var timeout = window.setTimeout(function () {
console.log("boom");
}, 2000);
// 清除
window.clearTimeout(timeout);
定时器
- 定时器是 window 对象的一个方法,相当于定时闹钟,每隔固定的时间响一次
- 语法:window.setInterval(func,interval);
- 第一个参数:每次执行的函数,可以是匿名函数定义,或者是一个函数名的引用,注意不要 加 () 。
- 第二个参数:时间间隔,以毫秒计数,1000 毫秒等于 1 秒。
- 功能:每隔一个指定的时间,周期性的执行一个函数。第一次执行时,是在第一个时间间隔之后
- 注意:定时器需要存储到一个变量中,便于后期调用或清除。
- 异步语句
var i=1;
//开启定时器,每隔0.5 秒输出一次 i
window.setInterval(function(){
console.log(i++);
},5000);
案例 简单运动
原理
- 简单运动:是一种视觉暂留效果,只要元素变化过程时间够短,给人眼造成的效果就是一个 运动的效果,人眼的视觉残留的时间 0.1-0.4 秒之间。
- 制作方法:通过定时器,实现每隔一个极短的时间(50-100 毫秒左右),执行函数,函数 内部让运动的属性值发生变化。
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
//获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
//点击开始,让box向右运动
//全局变量存储left的属性值,会每次发生变化
// 信号量初始值与属性初始值相同
var nowleft = 0;
//全局定义一个变量,储存定时器,以便清除时也可以使用这个变量。(如果不是全局变量,只能在函数作用域使用)
var timer;
//定时器
start.onclick = function () {
var timer = setInterval(function () {
nowleft += 10;
box.style.left = nowleft + "px";
}, 100);
};
</script>
</body>
提高运动速度的方法
- 缩短时间间隔,增加了每秒移动的次数。
- 加大步长,让每一次走的步长增加。
清除定时器
- window 对象的一个方法
- 语法:window.clearInterval(timer);
- 参数:要清除的定时器变量名。
- 功能:清除指定的定时器。
清除定时器的问题
问题1 多次点击加快且定时器无法停止
将定时器的开始和停止过程书写在不同的事件函数内部,容易出现用户错误点击情况
- 多次点击开始,会造成加速
- 点击一次就开始一个定时器,多次想加速度变快
- 多次点击开始,不能够再停止
- 变量存储的是最后一次的定时器,取消时只能取消最后一次点击加入的定时器,之前的定时器将无法取消。
解决方法
- 设表先关:每次开启新定时器之前,都清除一次前面的定时器
<body>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="end">
<div class="box" id="box"></div>
<script>
//获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
//点击开始,让box向右运动
//全局变量存储left的属性值,会每次发生变化
// 信号量初始值与属性初始值相同
var nowLeft = 0;
//全局定义一个变量,储存定时器,以便清除时也可以使用这个变量。(如果不是全局变量,只能在函数作用域使用)
var timer;
//定时器
//定时器写在事件函数内部,会由于事件多次触发,导致定时器累加
//解决办法 设表先关:每次重启计时器之前,将前一次的计时器关闭
start.onclick = function () {
//清除定时器
clearInterval(timer);
timer = setInterval(function () {
nowLeft += 10;
box.style.left = nowLeft + "px";
}, 100);
};
//清除定时器
end.onclick = function () {
clearInterval(timer);
};
</script>
</body>
问题2 无法停止在指定位置
- 需求:要求元素走到指定位置停止,例如让元素停止在 500px 的位置.
- 问题:如果步长设置的不合理,停止的位置可能不是正好在 500 处。
解决方法 拉终停表
- 拉终停表
- 在定时器内部每次都要判断是否走到了终点,要不要停止定时器
- 如果走到或超过了终点,强行拉到重点,并停止定时器
<body>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="end">
<div class="box" id="box"></div>
<script>
var start = document.getElementById("start");
var box = document.getElementById("box");
var nowLeft = 0;
var timer;
start.onclick = function () {
//清除定时器
clearInterval(timer);
timer = setInterval(function () {
nowLeft += 10;
//判断这一次运动是否走到了500px的位置
//拉终停表,将位置拉到 500,停止定时器
if (nowLeft >= 500) {
nowLeft=500;
clearInterval(timer);
}
box.style.left = nowLeft + "px";
}, 100);
};
</script>
</body>
问题3 在总时间内走到规定位置
- 需求:在规定时间内让元素走到规定的结束位置,时间间隔可以更改
- 例如:让元素在 2 秒钟内,left 属性从 0 走到 500px.
问题三解决方法
- 步标整除
- 总距离 = 步长 * 次数;
- 时间间隔自定义,总时长固定
- 求出总次数 = 总时间 / 时间间隔
- 定义计数器变量,每执行一次定时器函数增加计数 1,直到执行达到总次数,停止定时器
<body>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="end">
<div class="box" id="box"></div>
<script>
var start = document.getElementById("start");
var box = document.getElementById("box");
//已知开始和结束位置,总时长,时间间隔
// 总距离=步长+总次数
// 总距离=结束位置-起始位置
// 总次数=总时长/时间间隔
// 步长=(结束位置-起始位置)/(总时长/时间间隔)
// 信号量,相当于初始值
var nowLeft = 100;
//结束位置
var endLeft = 500;
// 总时长
var time = 2000;
//时间间隔
var interval = 50;
//总次数
var maxcount = time / interval;
//运算出每一次的步长
var step = (endLeft - nowLeft) / maxcount;
// 次数的累加器
var count =0;
//设置定时器
var timer;
start.onclick = function () {
timer = setInterval(function () {
//元素属性每次变化一个步长
nowLeft += step;
//运动一次次数累加器加1
count++;
//停止定时器
if (count>=maxcount) {
//拉终停表
nowLeft=endLeft;
clearInterval(timer);
}
// 给属性赋值
box.style.left = nowLeft + "px";
}, interval);
};
</script>
</body>
封装动画函数
- 单一动画
- 多属性动画