写在前面:
每天进步一点点,相信河流终将汇聚成海洋
知识导航:
- BOM简介
- 定时器
- 三大对象
1. 简介
1.1 何为BOM
BOM(Browser Object Model)浏览器对象模型,它提供了独立于内容
而与浏览器窗口进行交互的对象
,其核心对象是 window
。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
1.2 BOM的构成
window是BOM的顶级对象,可见DOM也是属于BOM的一部分
1.3 常见window对象事件
window对象给js访问浏览器窗口一个接口
,同时在js中设置的所有全局变量的全局函数。都会变成window的属性和方法
window的属性和方法在调用时可以省去window.
。如alert()
全名应是window.alert()
1.3.1 页面加载事件
方法一:
window.addEventListener("load",fn)
window.onload 是页面加载事件,是当文档内容完全加载完成之后才会触发该事件
如按照js的执行顺序右面的按钮是没有效果的(因为获取的时候按钮都还不存在呢),load事件真正实现了让我们的js放在任何位置
方法二
window.addEventListener("DOMContentLoaded ",fn)
(IE9)
它是仅当仅当DOM加载完成(不包括样式表,图片等)就触发。
它的优点在于
如果页面的图片很多的话, 从用户访问到全部加载完成再触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。(图片懒加载)
1.3.2 调整窗口大小事件
resize事件,只要是浏览器窗口大小发生变化时该事件就会触发
栗子:
window.addEventListener("load", function() {
window.addEventListener("resize", function() {
console.log(window.innerWidth);//可获得当前窗口的宽度
});
});
2. 定时器
2.1 setTimeout()
window对象的方法下面我就把window胜率了
方法:
setTimeout(回调函数,延迟的毫秒数不写默认是0)
回调函数:和事件处理函数都是一样的,就是说等一个事件被触发时才执行。这里的触发条件就是多少时间之后
举栗子:
// 常用的俩种写法
setTimeout(function() {
alert("aa");
}, 1000);
setTimeout(fn, 1000);
function fn() {
alert("aa");
}
停止计时器:
方法:clearTimeout(计时器名字)
举个栗子:
var timer = setTimeout(fn, 1000);
clearTimeout("timer");
function fn() {
alert("aa");
}
2.2 setInterval()
与上面计时器不同的是:上面那个的回调函数只会执行一次,而这个是每隔一段时间便会执行一次
使用方法与上相同:setInterval(回调函数,延迟的毫秒数不写默认是0)
回调函数也是可以直接写匿名函数,或者写命名函数的名字
举个栗子:
window.addEventListener("load", function() {
var i = 0
setInterval(function() {
console.log(i);
i
}, 500);
});
2.3 倒计时案例
案例一:倒计时
先看效果:
栗子代码:(注意要提前调用一下倒计时函数,因为计时器第一次执行也是1s后所以会有空白。开始先调用一下就好了)
var div = document.querySelector("div");
div.innerHTML = getTime("2020-2-10 20:00:00");
setInterval(function() {
div.innerHTML = getTime("2020-2-10 20:00:00");
}, 1000);
function getTime(time) {
var time01 = new Date();
var time02 = new Date(time);
var time03 = (time02 - time01) / 1000;
var s = parseInt(time03 % 60);
var m = parseInt(time03 / 60 % 60);
var h = parseInt(time03 / 60 / 60 % 24);
var d = parseInt(time03 / 60 / 60 / 24);
s = s < 10 ? "0" s : s;
m = m < 10 ? "0" m : m;
h = h < 10 ? "0" h : h;
d = d < 10 ? "0" d : d;
return "倒计时" d "天" h "小时" m "分" s "秒";
}
</script>
案例二:发送手机验证码时的按钮
为方便演示我把时间设置成了1s
效果:
栗子代码:
<button>发送验证码</button>
<script>
var btn = document.querySelector("button");
var timer = null;
btn.addEventListener("click", function() {
this.disabled = "disabled";
var i = 1;
btn.innerHTML = "倒计时" i "秒";
timer = setInterval(function() {
if (i == 0) {
clearInterval(timer);
btn.disabled = "";
btn.innerHTML = "发送验证码";
i = 1;
} else {
i--;
btn.innerHTML = "倒计时" i "秒";
}
}, 1000)
});
</script>
3. 三大对象
3.1 location对象
location其实是window的一个属性,但是我们用window.location
调用的时候返回的是一个对象。所以称他为location对象
利用它可以接下当前窗体的url,或者进行页面跳转
3.1.1 先来看它的属性
主要来举个search的栗子。
需要页面跳转所以要准备两个html页面
页面一:
<form action="date对象.html">//不写提交默认get方式,且get方式是地址栏传参正是我们需要的
<label for="uname"></label>
<input type="text" name="uname" id="">
<input type="submit" value="提交">
</form>
页面二:
<script>
console.log(location.search);
</script>
先看一眼参数
结果:
想要得到比较正规的数据,对这个字符串做一下处理即可
重新写一下页面二:字符串内置对象操作传送门
<script>
var str = location.search;
// 去掉?
var strNew = str.substr(1);
var strs = strNew.split("=");
console.log("参数名" strs[0] "参数值" strs[1]);
</script>
再来看效果:
3.1.2 再来看它的方法
举栗子:
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 记录浏览历史,所以可以实现后退功能
location.assign('http://www.baidu.com');
// 不记录浏览历史,所以不可以实现后退功能
location.replace('http://www.baidu.com');
//强制刷新去除缓存
location.reload(true);
})
</script>
3.2 navigator对象
navigator 对象包含有关浏览器的信息
我们最常用的是 userAgent,该属性可以得到我们设备的一些信息
它最常用的操作就是判断我们的终端使用的是pc还是手机
,从而转到不到的页面。pc到pc端,手机到移动端
举个栗子:
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 = ""; //转到pc端页面
}
3.3 history对象
用的很多,简单了解一下它的方法就行了
它与浏览器历史记录进行交互,保存着访问过的url
常用方法:
简单写一个栗子吧
还是需要准备两个页面
页面一:
<body>
<a href="content.html">进去content页面</a>
</body>
页面二:
<body>
<button>返回上个页面</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
history.go(-1);
});
</script>
</body>
效果: