首页 > 其他分享> 文章详细

BOM

2021-12-07 23:04:19 阅读：153 来源： 互联网

标签：function 定时器 window BOM addEventListener var document

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>

标签：function,定时器,window,BOM,addEventListener,var,document
来源： https://www.cnblogs.com/yang123-456/p/15659269.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BOM

BOM