window常见事件
1、window.onload() 窗口加载事件
有了它,我们就可以在页面的任何位置的script标签写js代码
因为onload是等页面全部内容加载完毕之后,再去执行函数内的代码,使用时我们用事件包含起来就行了
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
2、DOMContentLoaded事件(与上面类似,差别在下)
此事件是等到DOM加载完成后,就执行,不用等到图片、css加载完毕
如果网站图片较多,我们用load会等页面全部加载完成之后再显示交互效果,用户体验较差,因此可以用DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
3、resize 浏览器窗口大小发生变化时触发(曾经用于响应式布局)
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
4、 setTimeout
语法规范: window.setTimeout(调用函数, 延时时间);
1. 这个window在调用的时候可以省略
2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
3. 使用方法
(1) 这个调用函数可以直接写函数
setTimeout(function() {
console.log('时间到了');
}, 2000);
(2)还可以写 函数名
function callback() {
console.log('爆炸了');
}
setTimeout(function() {
console.log('时间到了');
}, 2000);
(3)还有一个写法 '函数名()'(不提倡)
setTimeout('callback()', 3000); // 我们不提倡这个写法
4. 页面中可能有很多的定时器,我们经常给定时器加名字,起名同时也调用了
var timer1 = setTimeout(callback, 3000);
5、清除定时器clearTimeout(定时器名);
clearTimeout(timer);
5、setInterval (使用方法与上面一致,但是它是重复调用)
案例:(定时器)
1. 获取元素
2.封装一个函数(用于把事件放入盒子内)
function date() {
var inputTime = +new Date('2020-9-23 10:20:00'); // 返回的是用户输入时间总的毫秒
var nowTime = +new Date()
var time = (inputTime - nowTime) / 1000
var h = parseInt(time / 60 / 60)
h = h < 10 ? '0' + h : h
hour.innerHTML = h
var min = parseInt(time / 60)
min = min < 10 ? '0' + min : min
minute.innerHTML = min
var sec = parseInt(time % 60)
sec = sec < 10 ? '0' + sec : sec
second.innerHTML = sec
}
3、利用定时器反复调用函数
var timer = setInterval(date, 1000)
4、注意:一开始刷新页面时,会有原始盒子里的数据,这需要我们在之前先调用一次这个函数,提前先把数据放进盒子内,之后再利用定时器反复调用函数
代码示例:
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
date()
function date() {
var inputTime = +new Date('2020-9-23 10:20:00'); // 返回的是用户输入时间总的毫秒
var nowTime = +new Date()
var time = (inputTime - nowTime) / 1000
var h = parseInt(time / 60 / 60)
h = h < 10 ? '0' + h : h
hour.innerHTML = h
var min = parseInt(time / 60)
min = min < 10 ? '0' + min : min
minute.innerHTML = min
var sec = parseInt(time % 60)
sec = sec < 10 ? '0' + sec : sec
second.innerHTML = sec
}
var timer = setInterval(date, 1000)
</script>