BOM浏览器对象模型

思维导图

什么是BOM

  1. 顶级对象是window
  2. window.name 是特殊的属性

窗口加载事件

  1. 窗口加载事件 window.onload = function(){}等页面加载完毕，具有唯一性，层叠性，使用addEventListener则没有限制

  2. document.addEvenListener('DOMContentLoaded',function(){})

    区别：load事件是页面内容全部加载完毕，包括dom元素，图片，css等，DOMContentLoaded是DOM加载完毕就执行,不包括其他的图片等等

  3. window.onresize()只要窗口发生变化，像素点发生变化，就执行，响应式布局

  4. window.innerWidth可以检测屏幕的宽度

  5. `window.setTimeout(调用函数，延时时间)，window调用可以省略，只调用一次

查看实例

1
2
3
4
5
6
7
8
setTimeout(function(){
    console.log('时间到了');
},2000)
function calk(){
    console.log('爆炸了');
}
var time1 = setTimeout(calk,3000);
var time2 = setTimeout('calk()',3000);
  1. 回调函数callback window.SetTimeout()
  2. 清除定时器 clearSetTimeout(定时器的名称)
  3. 定时器 window.setInterval()反复调用函数
  4. 清除重复的定时器widow.clearInterval

清除效果

1
2
3
4
5
6
7
8
9
10
11
12
13
<span>1</span>
<li>2</li>
<script>
    var span = document.querySelector('span');
    var timer = function(){
        console.log('真好');
    }
    var li = document.querySelector('li');
    li.addEventListener('click',function(){
        clearTimeout(times);
    })
    var times = setTimeout(timer,5000);
</script>

案例网站运行时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    <style>
        .box {
            width: 140px;
            height: 30px;
            margin: 100px auto;
        }

        .countdown {
            width: 100%;
            height: 100%;
            display: inline-flex;
        }

        .countdown span {
            flex: 25%;
            margin-left: 5px;
            background-color: #000;
            color: #fff;
            font-size: 14px;
            font-weight: 550;
            text-align: center;
            line-height: 30px;
            border-radius: 7px;
        }

        .countdown span:nth-child(1) {
            margin-left: 0;
        }
    </style>
</head>


<body>
    <div class="box">
        <div class="countdown">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var count = document.querySelector('.countdown');
        var inputdate = +new Date('2019-12-31 0:0:0')
        countdown();
        setInterval(countdown, 1000);
        function countdown() {
            var nowdate = +new Date();
            var times = (nowdate - inputdate) / 1000;
            var d = parseInt(times / 60 / 60 / 24);
            count.children[0].innerHTML = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            count.children[1].innerHTML = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);
            count.children[2].innerHTML = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);
            count.children[3].innerHTML = s < 10 ? '0' + s : s;
        }
    </script>

演示图例

短信倒计时案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<input type="number" name="" id=""><button>发送</button>
<script>
    var btn = document.querySelector('button');
    var timer = 60;
    btn.addEventListener('click', function () {
        btn.disabled = true;
        var times = setInterval(function () {
            if (timer == 0) {
                clearInterval(times);
                btn.disabled = false;
                btn.innerHTML = '发送'
                timer = 60;
            } else {
                btn.innerHTML = '还剩下' + timer + 's'
                timer--;
            }
        }, 1000)
    })
</script>

this指向

  1. 方法调用中谁调用this指向谁
  2. 全局作用下的this指向window

同步和异步

  1. 执行的顺序不同
  2. 同步任务都在主线程上
  3. 异步任务 是通过回调函数实现的
  4. 事件循环 event loop

loaction对象

  1. https://www.xxxx.cn/index.html?name=andy&age=18#link
  2. query 是以键值对的形式通过&符号分隔开
  3. location.href 获取url
  4. location.search 返回参数
  5. location.hash 返回片段 #
  6. location.pathname 返回路径
  7. location.port 返回端口号
  8. location.host 返回主机域名
  9. location.assign()和href一样，能记录浏览历史
  10. location.replace(),无法记录浏览历史
  11. location.reload() 如果+ true 页面可强制刷新
  • 使用location对象将一个页面的数据传送到另一个页面

查看实例

1
2
3
4
5
6
7
var div = document.querySelector('div');
console.log(location.search);
var a = location.search.substr(1);
console.log(a);
var arr = a.split('=');
console.log(arr);
div.innerHTML = arr[1] + '博客欢迎你'

查看答案

1
2
3
4
5
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 = "";     //电脑
 }

history对象

  1. history.back 后退
  2. history.forword 前进
  3. history.go(1/-1) 实现页面的前进后退