javascript- BOM
BOM：浏览器对象模型，提供独立于内容的而与浏览器窗口进行交互的对象，其核心对象时window。
BOM比DOM更大，包含DOM。
window对象是浏览器的顶级对象，具有双重角色
它是js访问浏览器的一个接口
它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用的时候，可以省略window，前面学习的对话框都是属于window对象方法，如alert（）、prompt（）等
注：window下的一个特殊属性window.name
window对象常见的事件
窗口加载事件
<script>
// window.onload = function () {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function () {
// alert('jjjjj');
// });
// }
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('jjjjj');
})
});
window.addEventListener('load', function () {
alert(22);
});
document.addEventListener('DOMContentLoaded', function () {
alert(33);
});
//load等页面内容全部加载完毕，包含页面dom元素图片等
//DOMContentLoaded是dom加载完毕，不包括图片css等就可以执行加载速度比load快
</script>
<button>click</button>
注：
- 有了window.onload就可以把js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
- window.onload传统注册事件方式智能写一次，如果有多个，会以最后一个window.onload为准。
调整窗口大小事件
<script> window.addEventListener('resize', function () { console.log('bianhua'); }) </script>
注：
1.只要窗口大小发生变化，就会触发这个事件
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。
定时器
setTimeout(调用函数，[延迟的毫秒数]);
<script>
// setTimeout(function () {
// console.log('时间到了');
// }, 2000);
function callback() {
console.log('boom');
}
setTimeout(callback, 3000);
</script>
注：单位必须是毫秒，可以不写默认立刻执行
案例：五秒关闭广告
<img src="images/ldh.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function () {
ad.style.display = 'none';
}, 5000);
</script>
清除定时器
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function () {
console.log('boom');
}, 2000);
btn.addEventListener('click', function () {
clearTimeout(timer);
});
</script>
setlnterval定时器
<script> setInterval(function(){ console.log('boom'); },2000); //重复调用 </script>
案例:京东秒杀倒计时
这个倒计时不断变化，因此需要定时器来自动变化（setlnterval）
三个黑色盒子分别计算
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date("2022-3-27 18:00:00");//返回用户输入时间总的毫秒数
//2.开启定时器
setInterval(cutDown, 1000);
function cutDown() {
var nowTime = +new Date();//返回当前时间的总的毫秒数
var times = (inputTime - nowTime) / 1000;//times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24);//hour
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);//min
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);//miao
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
关闭定时器
<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null;
begin.addEventListener('click', function () {
timer = setInterval(function () {
console.log('开始');
}, 1000);
});
stop.addEventListener('click', function () {
clearInterval(timer);
});
</script>
案例：发送短信
- 按钮点击后，会禁用disabled为true
- 同时按钮里面的内容话变化，注意button里面的内容通过innerHTML修改
- 里面秒数是有变化的，因此需要用到定时器
- 定义一个变量，在定时器里面，不断递减
- 如果变量为0说明到了时间，我们需要停止定时器，并且恢复按钮初始状态。
手机号码：<input type="number"><button>发送</button>
<script>
var time = 3;
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000)
});
</script>
this指向问题 一般情况下this的最终指向的那个调用它的对象
- 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
- 方法调用中谁调用this就指向谁
- 构造函数中this指向构造函数的实例
JS执行机制
单线程，同一个时间只能做一件事。
同步：前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序一样
异步：在做这件事的同时可以去做其他的事
- 先执行执行栈中的同步任务
- 异步任务放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
location对象
用于获取窗体的URL（统一资源定位符是互联网上标准资源的地址）
5秒后跳转界面
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function () {
// console.log(location.url);
location.href = 'http://www.baidu.com';
});
var timer = 5;
setInterval(function () {
if (timer == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您将在' + timer + '秒钟后跳转到首页';
timer--;
}
}, 1000)
</script>
获取URL
第一个登陆页面，里面提交表单，action提交到index.html页面
第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
在第二个页面中，需要把这个参数提取
第一步去掉？利用substr
第二步利用=号分割和值split（’=‘）
<div></div>
<script>
console.log(location.search);
//先删除？
var params = location.search.substr(1);//uname=???
console.log(params);
//2.利用=分割数组
var arr = params.split('=');
var div = document.querySelector('div');
div.innerHTML = arr[1] + '欢迎你';
</script>
location对象的方法
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//记录浏览历史，所以可以实现后退功能
location.assign('https://www.baidu.com');
//不记录浏览历史，所以不可以实现后退功能
location.replace('https://www.baidu.com');
//重载
location.reload('https://www.baidu.com');
})
</script>
navigator对象
PC端跳转手机端显示
history对象
<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
history.forward();
});
