文章目录
- 1. BOM 概述
- 2.window 对象的常见事件
- 窗口加载事件
- 调整窗口大小事件
- 3.定时器
- setTimeout() 定时器
- 案例:5秒后自动关闭的广告
- 停止 setTimeout() 定时器
- setInterval() 定时器
- 案例:倒计时
- 停止 setInterval() 定时器
- 案例:发送短信
- this
- 4. JS 执行机制
- 5. location 对象
- URL
- location对象属性
- location对象的方法
- 案例: 5秒钟之后自动跳转页面
- 案例: 获取 URL 参数数据
- 6. navigator 对象
- 7. history 对象
1. BOM 概述
2.window 对象的常见事件
窗口加载事件
window.onload = function(){}
或者
window.addEventListener("load",function(){});
document.addEventListener('DOMContentLoaded',function(){})
调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
3.定时器
setTimeout() 定时器
setTimeout() 定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
案例:5秒后自动关闭的广告
核心思路:5秒之后,就把这个广告隐藏起来
用定时器setTimeout
<img src="image/1_waifu2x.png" alt="" class="ad">
<script>
var ad=document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none';
},5000);
</script>
停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
1.window 可以省略。
2.里面的参数就是定时器的标识符 。
setInterval() 定时器
window.setInterval(回调函数, [间隔的毫秒数]);
案例:倒计时
//1.获取元素
var hour=document.querySelector('.hour');//小时的黑色盒子
var minute =document.querySelector('.minute');//分钟的黑色盒子
var second =document.queryselector(.second');//秒数的黑色盒子
var inputTime =+new Date('2019-5-118:00:00');//返回的是用户输入时间总的毫秒数countDown);
//我们先调用一次这个函数,防止第一次刷新页面有空白
//2.开启定时器
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;}
停止 setInterval() 定时器
window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
注意:
1.window 可以省略。
2.里面的参数就是定时器的标识符 。
案例:发送短信
this
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
现阶段,我们先了解一下几个this指向
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
4. JS 执行机制
123
5. location 对象
window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象
URL
location对象属性
location对象的方法
案例: 5秒钟之后自动跳转页面
利用定时器做倒计时效果
时间到了,就跳转页面。 使用 location.href
案例: 获取 URL 参数数据
6. navigator 对象
navigator 对象包含有关浏览器的信息,它有很多属性,常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
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 = ""; //电脑
}
7. history 对象
window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。