目录
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>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154567.html
