BOM

2021/12/7 23:16:45

编程Tag： 定时器 function bom var window addEventListener document

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

BOM

BOM