BOM浏览器对象模型学习

1.BOM概述
BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行
交互的对象，其核心对象是window。

 

1.2 BOM的构成

BOM比DOM更大，它包含DOM。

2.window对象的常见事件

2.1 窗口加载事件

window.onload = function(){} //或者
window.addEventListener('load',function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括css，图片，flash等。IE9以上才支持

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

document.addEventListener('DOMContentLoaded',function(){})

2.2 调整窗口大小事件

 

window.onresize = function(){}//或者
window.addEventListener('resize',function(){});

 

注意：
① 只要窗口大小发生像素变化，就会触发这个事件。
② 经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

3.定时器

window对象提供了2个好用的方法-定时器。
· setTimeout()
· setInterval()

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

window.setTimeout(调用函数,[延迟的毫秒数]);

<script type="text/javascript">
            //1.这个window在调用的时候可以省略
            //2.这个延时事件单位是毫秒，但是可以省略，如果省略默认的是0
            //3.这个调用函数可以直接写函数 还可以写函数名
            function callback(){
                console.log('时间到了');
            }
            setTimeout(callback,3000);
        </script>

<script type="text/javascript">
            
            //4.页面中可能有很多定时器，经常给定时器加标识符（名字）
            function callback(){
                console.log('时间到了');
            }
            var timer1= setTimeout(callback,3000);
            var timer2= setTimeout(callback,4000);
        </script>

setTimeout()这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用。
这个函数，需要等待时间，时间到了采取调用 因此称为回调函数。

3.3 停止定时器clearTimeout(timeoutID)

点击按钮停止定时器

 

var timer1= setTimeout(callback,4000);
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                clearTimeout(timer1);
            })

 

注意：里面的参数就是定时器的标识符。

3.4 setInterval()定时器

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

倒计时效果案例

<div>
            <span class="hour"></span>
            <span class="minute"></span>
            <span class="second"></span>
        </div>
        <script type="text/javascript">
            var hour = document.querySelector('.hour');//小时的黑色盒子
            var minute = document.querySelector('.minute');//分钟的黑色盒子
            var second = document.querySelector('.second');//秒数的黑色盒子
            var inputTime = +new Date('2020-8-14 15:34:00');//返回的是用户输入时间总的毫秒数
　　　　　　　countDown();//先调用一个这个函数，防止第一次刷新页面有空白

            setInterval(countDown,1000);
            function countDown(){
                var nowTime = +new Date();//返回的是当前时间总的毫秒数
                var times = (inputTime - nowTime) / 1000;  //times是剩余时间总的秒数
                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>

 发送短信案例

手机号<input type="text" /><button>发送</button>
        <script type="text/javascript">
            var btn = document.querySelector('button');
            var time = 10;
            btn.addEventListener('click',function(){
                btn.disabled = true;
                var timer = setInterval(function(){
                if(time == 0){
                    btn.disabled = false;
                    clearInterval(timer);
                    btn.innerHTML = '发送';
                    time = 10;
                }else{
                    btn.innerHTML = '剩余'+time+'秒';
                    time--;
                }
            },1000);
            })
        </script>

4.JS执行机制

4.1同步和异步

同步任务
同步任务都做主线程上执行，形成一个执行栈。

异步任务
JS的异步是 通过回调函数实现的。
一般 异步任务有三种类型
① 普通事件，如click 、resized等
② 资源加载，如load、error等
③ 定时器，包括setInterval、setTimeout等

4.2 JS执行机制

① 限制性执行栈中的同步任务。
② 异步任务（回调函数）放入任务队列中。
③ 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，
于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

location对象的属性

获取url参数

<script>
            //location.search 取到 ?uname = andy
            //1.先去掉? substr('起始的位置',截取几个字符);
            var sm1 = location.search.substr(1);
            //2.利用=把字符串分割为数组 split('=');
            var arr = sm1.split('=');
            var div = document.querySelector('div');
            div.innerHTML = arr[1] + '欢迎您';
        </script>

location常见的方法

判断用户哪个终端打开页面，实现跳转

<script type="text/javascript">
            if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBrowser|BrowserNG|Webos|Symbian|Windows Phone)/i))){
                window.location.href='';//手机
            }else{
                window.location.href=''; //电脑
            }
        </script>

7. history对象

history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL