来源博客:【Harryの心阁】
思维导图
什么是BOM
- 顶级对象是
window
- window.name 是特殊的属性
窗口加载事件
- 窗口加载事件
window.onload = function(){}
等页面加载完毕,具有唯一性,层叠性,使用addEventListener则没有限制 document.addEvenListener('DOMContentLoaded',function(){})
区别:load事件是页面内容全部加载完毕,包括dom元素,图片,css等,DOMContentLoaded是DOM加载完毕就执行,不包括其他的图片等等
window.onresize()
只要窗口发生变化,像素点发生变化,就执行,响应式布局window.innerWidth
可以检测屏幕的宽度- `window.setTimeout(调用函数,延时时间),window调用可以省略,只调用一次
setTimeout(function(){
console.log('时间到了');
},2000)
function calk(){
console.log('爆炸了');
}
var time1 = setTimeout(calk,3000);
var time2 = setTimeout('calk()',3000);
- 回调函数callback window.SetTimeout()
- 清除定时器 clearSetTimeout(定时器的名称)
- 定时器
window.setInterval()
反复调用函数 - 清除重复的定时器
widow.clearInterval
<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>
<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>
<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指向
- 方法调用中谁调用this指向谁
- 全局作用下的this指向window
同步和异步
- 执行的顺序不同
- 同步任务都在主线程上
- 异步任务 是通过回调函数实现的
- 事件循环 event loop
loaction对象
https://www.xxxx.cn/index.html?name=andy&age=18#link
- query 是以键值对的形式通过&符号分隔开
- location.href 获取url
- location.search 返回参数
- location.hash 返回片段 #
- location.pathname 返回路径
- location.port 返回端口号
- location.host 返回主机域名
- location.assign()和href一样,能记录浏览历史
- location.replace(),无法记录浏览历史
- location.reload() 如果+ true 页面可强制刷新
- 使用location对象将一个页面的数据传送到另一个页面
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] + '博客欢迎你'
navidator对象
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对象
- history.back 后退
- history.forword 前进
- history.go(1/-1) 实现页面的前进后退