UI事件
UI事件不一定与用户操作有关
事件类型
load:当页面完全加载后在window上触发,图片也可以触发load事件
resize:当窗口大小变化时在window触发
scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发
读者可运行该案例,自己体会
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI</title>
<script>
window.onload = function() {
// 等待页面加载完毕后执行
var dTime = document.getElementById("time");
console.log(dTime);
}
</script>
<style>
.s {
width: 200px;
height: 200px;
background-color: pink;
overflow: scroll;
}
.s .mov {
width: 20px;
height: 2000px;
background-color: cyan;
}
.move {
width: 200px;
height: 4000px;
background-color: orange;
}
.hj {
width: 100px;
height: 100px;
background-color: hotpink;
position: fixed;
bottom: 50px;
right: 20px;
display: none;
}
</style>
</head>
<body>
<!-- <div id="time">12:00</div>
<div class="s">
<div class="mov"></div>
</div> -->
<div class="move">12sdfgwe fga12sdf gwefga12sd fgwefga12 sdfgwefga12 sdfgwefga1 2sdfgwefga12sd fgwefga12sdf gwefga12sdfg wefga12sdf gwefga12 sdfgwefga12sdfgwefga12sdfgwefga12sdfgwefga12sdfgwefgae</div>
<div class="hj"></div>
</body>
<script>
// var s = document.querySelector(".s");
// s.onscroll = function() {
// console.log(this.scrollTop);
// }
// var html = document.querySelector("html");
// document.body.onscroll = function() {
// console.log("html")
// }
var hj = document.querySelector(".hj");
window.onscroll = function(e) {
if(document.documentElement.scrollTop > 50) {
hj.style.display = 'block';
} else {
hj.style.display = 'none';
}
}
hj.onclick = function() {
move();
}
var timer = null;
function move() {
clearInterval(timer);
var t = 20;
var s = document.documentElement.scrollTop;
var v = s / t;
var count = 0;
timer = setInterval(function() {
count ++;
s -= v;
if (t === count) {
clearInterval(timer);
s = 0;
}
document.documentElement.scrollTop = s;
}, 30)
}
</script>
</html>