目录
window对象
window对象是浏览器的顶级对象。
1.是JS访问浏览器窗口的接口。
2.是一个全局对象,定义在全局作用域的变量,函数都会变成window对象的属性和方法。
window对象的常见事件
页面加载事件一: onload
当页面内容全部加载完成后触发处理函数。
声明方式
----声明方式一----
window.onload = function(){
//页面加载完后处理的代码
}
----声明方式二-----
window.addEventListener('load',function(){
//页面加载完后处理的代码
}
window.load 说明
window.onload是窗口(页面)加载事件,当文档内容全部加载完成就会触发该事件(HTML、CSS,图像等),就调用处理函数。
使用了window.load()以后,就可以将<script>标签放在文档的任何位置。
使用
当页面加载完后,获取div标签内容,打印到控制台
-----方式1------
<div id="div">aaa</div>
<script>
window.onload = function(){
var divcon = document.getElementById('div').innerHTML
console.log(divcon);
}
</script>
-----方式2------
<div id="div">aaa</div>
<script>
window.addEventListener('load',function(){
var divcon = document.getElementById('div').innerHTML
console.log(divcon);
})
</script>
页面加载事件二:DOMContentLoaded
DOMContentLoaded与Load的区别:
DOM加载完毕就触发,不包含图片,CSS等资源,比Load更快,更常用。
使用方式与Load基本一致。
声明方式
window.addEventListener('DOMContentLoaded',function(){
//DOM资源加载完后处理的代码
})
调整窗口大小事件:onresize
window.onresize是当窗口大小发生变化,就会调用处理函数。监测窗口大小。
声明方式
-------声明方式一------
window.onresize = function(){
// 函数处理程序
}
-------声明方式二------
window.addEventListener('resize',function(){
// 函数处理程序
})
使用
当窗口大小像素发生变化,就打印size
window.onresize = function(){
// 函数处理程序
console.log("size");
}
window.addEventListener('resize',function(){
// 函数处理程序
console.log("size");
})
定时器
window对象给我们提供了两个非常好用的方法-定时器
1.setTimeout( )
2.setInterval( )
定时器的作用:
例如,现在有一个需求:页面有一个盒子,当页面加载完毕,一秒钟后,盒子向右移动10像素(左边距加大10像素)只移动一次,就可以使用:setTimeout()
再例如,现在有一个需求:页面有一个盒子,当页面加载完毕,只要过一秒钟,就会向右移动10像素(左边距加大10像素)一直移动下去。就可以使用:setInterval()
定时器一:setTimeout
setTimeout()方法用于设置一个定时器,到达指定时间后执行调用函数。只执行一次。
声明方式
window.setTimeout(回调函数,[延迟的毫秒数]);
window可以省略,可以直接写为:setTimeout()
使用
设置一个定时器,当页面加载完毕后,过一秒钟,弹出一个弹窗。
window.onload = function(){
setTimeout(function(){
alert("setTimeout...")
},1000)//毫秒数
}
清除定时器
当定时器时间未到,我们不想给定时器触发函数,我们可以清除定时器。
用var temp 设置变量,给定时器设置个ID,在传给cleartimeout()
在定时器的调用函数到时间前清除有效。
使用
设置定时器,在页面加载完毕2秒钟后弹出弹窗,设置一个按钮,只要在页面加载完毕2秒钟内点击,就清除定时器,弹出则不会弹出。
<button id="clear">清除定时器</button>
<script>
window.onload = function(){
var time = setTimeout(function(){
alert("setTimeout...")
},2000)//毫秒数
document.getElementById('clear').onclick = function(){
window.clearTimeout(time)
}
}
</script>
定时器二:setInterval
setInterval()方法用于设置一个定时器,到达指定时间后执行调用函数。重复执行。
声明方式
window.setInterval(回调函数,[间隔毫秒数]);
setInterval()定时器,每次只要到达时间就执行,多次执行。
使用
声明setInterval()定时器,当页面加载完毕,只要过一秒,就弹窗一次。
window.onload = function(){
window,setInterval(function(){
alert('Interval...')
},1000)
}
setInterval()定时器的清除方式和setTimeout()一致。
两个定时器的区别
setTimeout:延时时间到了,就去调用回调函数,只调用一次就会结束定时器。
setInterval:每隔指定延时时间,就回去调用回调函数,会一直调用下去,知道清除定时器。
定时器案例一:秒杀倒计时
需求:页面实时更新秒杀倒计时,效果如图:
实现原理
设置setInterval()定时器,一秒钟触发一次函数,使用时间戳计算剩余时间,将时间填入对应盒子中即可。需要注意的是,页面加载时,因为计时器未到时间,有一秒的空当,所以我们手动先调用一次函数。
JS代码
<script>
//获取元素
var time = document.querySelectorAll('.time');
//手动设置秒杀时间
var endtime = +new Date('2022-10-4 21:00:00');
//定时器未开始,先手动调用一次
countdown();
//设置函数
function countdown(){
//获取当前时间戳(毫秒数)
var nowtime = +new Date();
//两时间戳相减,得到剩余时间戳
var countdowntime = endtime - nowtime;
var countdownsecond = countdowntime/1000
var hour =parseInt(countdownsecond/60/60%24)//小时
hour = hour < 10? '0' + hour :hour//判断,小于两位数前面补0
time[0].innerHTML = hour;//将时间写入
var minute = parseInt(countdownsecond/60%60)//分钟
minute = minute < 10? '0' + minute :minute
time[1].innerHTML = minute;//将时间写入
var secont = parseInt(countdownsecond%60)//秒
secont = secont < 10? '0' + secont :secont
time[2].innerHTML = secont;//将时间写入
}
//设置定时器
setInterval(countdown,1000)
</script>
HTML代码
<div class="box" >
<div id="hour" class="time">0</div>
<div id="minute" class="time">0</div>
<div id="second" class="time">0</div>
</div>
CSS代码
<style>
.box{
background-color: lightcoral;
width: 300px;
height: 350px;
margin-left: 200px;
display: flex;
justify-content: space-around;
align-items: flex-end;
padding: 20px;
box-sizing: border-box;
}
.time{
background-color: rgb(33, 135, 140);
width: 80px;
height: 80px;
color: white;
font-size: 32px;
font-weight: 600px;
line-height: 80px;
text-align: center;
}
</style>
定时器案例二:发送验证码倒计时
需求:点击发送验证码后,禁用发送按钮,显示倒计时,定时器到期后,解除禁用。
使用setInterval()定时器。
效果图
原理:使用setInterval()定时器,定时器延时时间设置为一秒钟。设置变量time=3,点击时定时器开始,递减time。
JS代码
<script>
var btn = document.querySelector('button');
var time = 3;
btn.addEventListener('click',function(){
btn.disabled = true;//禁用按钮
//添加定时器并命名
var interval = setInterval(function(){
if(time == 0){
//倒计时为0,清除定时器
clearInterval(interval)
btn.innerHTML = '发送';
btn.disabled = false;
time = 3;
}else{
btn.innerHTML = time + '秒后再次发送';
time--;
}
},1000)
})
</script>
HTML代码
<div id="box">
<div id="son">
验证码:<input type="number"> <button>发送</button>
</div>
</div>
CSS代码
<style>
#box{
border: solid lightcoral;
border-radius: 5px;
width: 350px;
height: 100px;
margin-top: 100px;
margin-left: 100px;
}
#son{
margin-top: 40px;
}
</style>