BOM

本文主要是介绍BOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

BOM

BOM(Browser Object Model)浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是Window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
BOM就是把浏览器当作一个对象，区别于DOM把文档看作一个对象
BOM的顶级对象是Window,区别于DOM的顶级对象是document

1. Window对象

是BOM的顶级对象，它是JS访问浏览器窗口的一个接口
它是一个全局对象，定义在全局作用域的变量和函数都会变成window对象的属性和方法，在调用的时候可以省略window,以嵌学习的对话框都属于window对象方法，比如：alert() prompt()等
注意window下的一个特殊的属性window.name 就是在定义全局变量时，避开name

1. Window对象的常见事件

1. 窗口加载事件

<script>
        window.onload = function(){

        }
        // 或者
        window.addEventListener('load',function(){})
    </script>

window.onload 是窗口加载事件，当文档内容完全加载完成时会触发该事件（就是等图像，脚本文件，CSS文件等加载完毕时），就调用该函数，
有了window.onload ，就可以不像在DOM中需要将script的内容必须写在文档元素的下面，此时可以将JS写在页面元素的上下方，因为onload是等页面内容加载完，再去执行处理函数
window.onload这种传统注册方式只能写一次，如果有多个，会以最后一个为准
window.addEventListener方法却可以写多个

<body>
    <button>
        点击我
    </button>
    <script>
        var btn = document.querySelector('button');
        window.onload = function(){
            alert('22');
        }
        // 或者
        window.addEventListener('load',function(){
            btn.addEventListener('click',function(){
                alert('点击');
            })
        })
        document.addEventListener('DOMContentLoaded',function(){
            btn.addEventListener('click',function(){
                alert('点击');
            })
        })
        // DOMContentLoaded事件触发时，仅当DOM加载完毕，不包括样式表，图片，flash等，IE9以上支持
        // 若页面的图片很多，从用户访问到onload触发可能需要较长的事件，交互效果就不能实现，
        // 必然会影响用户体验，此时用DOMContentLoaded事件合适
    </script>
</body>

2. 调整窗口大小事件

<script>
        window.onresize  = function(){

        }
        //或者
        window.addEventListener('resize',function(){})
    </script>

window.onresize是调整窗口大小事件，当窗口的大小发生像素变化时就会触发这个事件
经常利用这个事件完成响应式布局，
window.innerWidth是当前窗口的宽度
window.innerHeight是当前窗口的高度

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                console.log(window.innerWidth);
                console.log('变化了');
                if (window.innerWidth <= 400) {
                    div.style.display = 'none';
                }
                else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>
    <!-- 交互效果，当窗口的宽度小于400px时就隐藏该粉色盒子，大于则显示 -->
</body>

3. 定时器

1. window.setTimeout(回调函数，【延迟的毫秒数】) 这个window在调用时可以省略

setTimeout方法用于设置一个定时器，该定时器在定时器到时间后就会执行调用函数
【延迟的毫秒数】可以省略，默认是0秒
页面中可能有多个定时器，可以给定时器加标识符（起个名字）

<script>
        //  setTimeout(function(){
        //      alert('时间到了');
        //  },2000);
        //  //两秒后就触发了

         function bao(){
            alert('时间到了');
         }
        //  有多个 定时器，可以给 定时器加标识符
         var t1 = setTimeout(bao,2000);
         var t1 = setTimeout(bao,5000);
    </script>

setTimeout函数也称做回调函数，就是时间到了才会去调用
回调就是回头调用
以前的点击事件，onclick,也是回调函数，只有点击了才会调用

5秒后自动关闭的广告案例

5秒后就将广告图片隐藏起来，用到定时器定时

<body>
    <img src="imagines/tu07.jpg" alt="">
    <script>
         var ad = document.querySelector('img');
         setTimeout(function(){
             ad.style.display='none';
         },5000)
    </script>

清除定时器 window.clearTimeout(定时器标识符) 这个window在调用时可以省略

<script>
         function bao(){
            alert('时间到了');
         }
        //  有多个 定时器，可以给 定时器加标识符
         var t1 = setTimeout(bao,2000);
         clearTimeout(t1);
    </script>

3. window.setInterval(回调函数，【间隔的毫秒数】) 这个window在调用时可以省略

setInterval方法就是每隔一段时间就去调用一次回调函数
【间隔的毫秒数】可以省略，默认是0秒
页面中可能有多个定时器，可以给定时器加标识符（起个名字）
区别于setTimeout，是延迟事件到了，就去调用回调函数，只调用一次，就结束了这个定时器
而setInterval方法会重复调用回调函数

script>
         function bao(){
            alert('时间到了');
         }
        
         var t1 =  setInterval(bao,2000);
        
    </script>

倒计时案例(目前仍有问题)

分析：

因为这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
三个黑色盒子分别存放时分秒
三个黑色盒子利用innerHTML放入计算的小时分钟秒数

<body>
    <div>
        <span class='hour'>1</span>
        <span class='minute'>2</span>
        <span class='second'>3</span>
    </div>
    <script>
        //1.获取元素
        var hour = document.querySelector('.hour');//小时的黑色盒子
        var minute = document.querySelector('.minute');//分钟的黑色盒子
        var second = document.querySelector('.second');//秒的黑色盒子

        //定义一个全局变量，来接收用户输入的时间，并转换为总的毫秒数
        var inputTime = +new Date('2021-12-7 23:35:00');//返回用户输入的时间的毫秒数

        //先调用一次这个函数，防止第一次刷新页面有空白
        countDown();

        //2. 开启定时器，每个一秒调用封装的倒计时函数
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();//返回当前时间总的毫秒数  
            var times =inputTime > nowTime? (inputTime - nowTime) / 1000:0;      
            // //剩余的时间戳，此处把毫秒换算为秒了
        
            var h = parseInt(times / 60 / 60 %24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;

            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;

            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
            //将剩余的时分秒分别给各个小盒子



        }

    </script>

</body>

清除定时器 window.clearInterval(定时器标识符) 这个window在调用时可以省略

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">关闭定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');

        var t = null;//此处给定时器设置一个全局的标识符，便于清除定时器
        //因为定时器本身是一个对象，给全局变量赋值为空对象  null
        begin.addEventListener('click',function(){
            t = setInterval(function(){
                 alert('nihao');
            },1000)
        })

        stop.addEventListener('click',function(){
            clearInterval(t);
        })
    </script>
    
</body>

发送短信案例：

就是用户点击发送按钮后，该按钮在三秒之内不能再次点击，防止重复发送短信
分析：

按钮点击之后，会禁用disabled为true
同时按钮里面的内容会变化，让用户看到“你还有多少秒再次可以点击”的内容时有秒数的变化，注意button里面的内容通过innerHTML修改
里面的秒数有变化，要用定时器
定义一个变量，在定时器里面不断地递减
如果变量递减到0，说明到了时间，就需要停止定时器，并且回复到按钮的初始状态

<body>
     手机号码：<input type="number"> <button>发送</button>
    <script>
        // 1.获取元素 ：按钮点击之后，会禁用disabled为true
        var btn = document.querySelector('button');
        var time = 3;//定义剩下的总秒数
        btn.addEventListener('click',function(){
            btn.disabled = true;
            // 按钮里面的内容会变化:button里面的内容通过innerHTML修改
            //将以上内容写到计数器中，
            var t =setInterval(function(){
               if(time==0){
                   clearInterval(t);
                   btn.disabled = false;
                   btn.innerHTML = "发送";
                   time=3;//此处的3要重置
               }
               else{
                btn.innerHTML = '还剩下'+time+'秒';
                time--;
               }
            },1000)
            
        })
    </script>
    
</body>

这篇关于BOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

BOM

BOM

1. Window对象

1. Window对象的常见事件

1. 窗口加载事件

2. 调整窗口大小事件

3. 定时器

1. window.setTimeout(回调函数，【延迟的毫秒数】) 这个window在调用时可以省略

5秒后自动关闭的广告案例

清除定时器 window.clearTimeout(定时器标识符) 这个window在调用时可以省略

3. window.setInterval(回调函数，【间隔的毫秒数】) 这个window在调用时可以省略

倒计时案例(目前仍有问题)

清除定时器 window.clearInterval(定时器标识符) 这个window在调用时可以省略

发送短信案例：

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯