BOM简介

最新推荐文章于 2023-05-11 11:21:49 发布

阿雾a

最新推荐文章于 2023-05-11 11:21:49 发布

阅读量130

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_58526727/article/details/118496390

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文详细介绍了浏览器对象模型BOM的概念，包括核心对象window及其属性和方法，如alert、prompt、confirm对话框，以及加载事件onload。此外，还探讨了如何利用延时器setTimeout和定时器setInterval实现简单动画，以及如何解决在运动过程中遇到的问题，如调整速度、在指定位置停止和在规定时间内完成运动。文章最后提出了封装动画函数的可能性。

摘要由CSDN通过智能技术生成

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>

封装动画函数

单一动画
多属性动画

阿雾a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM简介

BOM 浏览器对象模型BOM 的概念BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象，其他对象都是该对象的子对象(document对象也是window的子对象)。我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。window 对象window 是浏览器
复制链接

扫一扫