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) 实现页面的前进后退