Bom浏览器对象模型

IT行星

于 2022-09-15 13:57:24 发布

阅读量183

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_72694993/article/details/126869508

版权

一、定时器

setTimeout()—— 暂停指定的毫秒数后执行指定的代码
clearTimeout()——取消指定的setTimeout函数将要执行的代码
setInterval()——间隔指定的毫秒数不停地执行指定的代码
clearInterval()——取消指定的setInterval函数将要执行的代码

用法 setInterval(()=>{},时间（单位毫秒）），setTimeout和其用法相同；

当然箭头函数也可以用function函数替代

而清楚定时器需要我们定义的时候给其定义一个名字，当消除定时器的时候，直接调用他的名字就噩可以了，例如下边代码

        var timer = setInterval(function(){
            console.log( Math.random() )
        },1000);

        var oBtn = document.getElementById('btn');
        oBtn.onclick = function(){
            clearInterval(timer)
        }

        */


        var timer1 = setTimeout(function () {
            console.log(Math.random())
        }, 2000);


        clearTimeout(timer1);



    </script>

二、滚动条相关

1、scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
2、scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)

3.我们利用上边学的去实现一个小功能

<1>我们现在body中多写一些内容，让其拥有滚动条

    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
    <h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>

<2>然后我们通过设置按钮点击按实现滚动条返回顶部，我们通过定时器进行这个操作，当scollTop<=0时清除这个定时器（注：scollTop是页面当前距离顶部的高度）



    <button id="btn">click</button>
    <script>


     


        // 点击按钮 滚动调皮滚动到顶部 
        // 1取到按钮
        var oBtn = document.getElementById('btn');

        //2 绑定点击事件 
        oBtn.onclick = function () {
            //3 让滚动条滚动到顶部
            // window.scrollTo(0,0);

            // window.scrollBy(0,-50)

            // 4 可不可以 通过定时器 每隔一段时间向上移动。

            // 判断 是否到达顶部，通过当前滚动条滚动的高度

            var timer = setInterval(function () {
                // 获取当前滚动条滚动的高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if( scrollTop <= 0){
                    clearInterval(timer);
                }else{
                    window.scrollBy(0, -50)
                }
            }, 50)



        }

三、历史记录相关

back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go(num) 加载 history 列表中的某个具体页面，值得注意的是我们想要点击下一个需要先去点击a标签创建历史记录再返回此页面的时候才生效

<body>

    <a href="./bom-4.html">A页面</a>
    <button id="btn">下一个</button>

    <script>

        var oBtn = document.getElementById('btn');
        oBtn.onclick = function () {
            // 下一页
            history.forward();

        }


        console.log(location.hostname, location.href);
        //location:
        //  location.hostname等信息
        //navigator.userAgent  用户电脑信息
        
             


    </script>

下边代码是a标签链接的页面，其中绑定上一页的功能实现

<body>
    我是A页面

    <button id="btn">上一页</button>
    <script>
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function(){
            // 上一页

            history.back()

        }

    </script>
</body>

四、其他方法

alert（）--弹出消息对话框（对话框中有一个“确定”按钮）
confirm（）--弹出对话框（对话框中包含一个确定与取消按钮）
prompt()--弹出对话框（对话框包含一个确定与取消按钮与一个文本框）；

IT行星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bom浏览器对象模型

2、scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)1、scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置。go(num) 加载 history 列表中的某个具体页面，值得注意的是我们想要点击下一个需要先去点击a标签创建历史记录再返回此页面的时候才生效。
复制链接

扫一扫