js对dom的操作以及定时器的使用
第一种类型
<!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>Document</title>
<style>
body {
overflow: hidden;
cursor: pointer;
}
* {
margin: 0;
padding: 0;
}
#cont {
width: 150px;
height: 200px;
background: red;
position: absolute;
top: 200px;
}
#side {
width: 20px;
height: 90px;
background: green;
position: absolute;
left: -20px;
}
</style>
<script>
window.onload = function() {
let w = document.body.offsetWidth; //获取页面的宽度
console.log(w);
//获取页面的长度
let cont = document.getElementById('cont');
let cw = cont.offsetWidth;
//获取cont的长度
cont.style.left = w + 'px'; //cont所在的位置是页面的长度
let timer = null //设置定时器为null
cont.onmouseover = function() {
clearInterval(timer) //关闭定时器，防止定时器冲突
timer = setInterval(() => {
if (cont.offsetLeft <= w - cw) {
clearInterval(timer)
} else {
cont.style.left = cont.offsetLeft - 10 + 'px';
}
}, 100);
}
cont.onmouseout = function() {
clearInterval(timer)
timer = setInterval(() => {
if (cont.offsetLeft == w) {
clearInterval(timer)
} else {
cont.style.left = cont.offsetLeft + 10 + 'px';
}
}, 100);
}
}
</script>
</head>
<body>
<div id="cont">
<div id="side">查看更多</div>
</div>
</body>
</html>
第二种类型
<!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>Document</title>
<style>
body {
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
#a {
width: 40px;
height: 40px;
position: absolute;
top: 200px;
font-size: 40px;
cursor: pointer;
}
#b {
width: 40px;
height: 40px;
position: absolute;
top: 200px;
}
</style>
<script>
window.onload = function() {
let w = document.body.offsetWidth;
let a = document.getElementById('a'); //红方块
let aw = a.offsetWidth //红方块的长度
a.style.left = w - aw + 'px' //红方块的位置
let b = document.getElementById('b'); //绿方块
let bw = b.offsetWidth //绿方块的长度
b.style.left = w + 'px' //绿方块的位置
let greenLift, redleft, greenRight = null //重置一下没个定时器
a.onclick = function() { //红方块的点击事件
clearInterval(greenLift, greenRight, redleft)
//先清除一下定时器防止冲突
redleft = setInterval(() => {
if (a.offsetLeft >= w) {
clearInterval(redleft)
} else {
a.style.left = a.offsetLeft + 10 + 'px'
}
}, 100); //红方块向右移动
greenLift = setInterval(() => {
if (b.offsetLeft <= w - bw) {
clearInterval(greenLift)
} else {
b.style.left = b.offsetLeft - 10 + 'px'
}
}, 100); //绿方块向左移动
}
b.onclick = function() { //小绿方块的点击事件
clearInterval(greenLift, greenRight, redleft)
greenRight = setInterval(() => {
if (b.offsetLeft >= w) {
clearInterval(greenRight)
} else {
b.style.left = b.offsetLeft + 10 + 'px'
}
}, 100);
redLeft = setInterval(() => {
if (a.offsetLeft <= w - aw) {
clearInterval(redLeft)
} else {
a.style.left = a.offsetLeft - 10 + 'px'
}
}, 100);
}
}
console.log('在我写的时候上帝和我都知道要写什么,但是现在只有上帝才知道');
</script>
</head>
<body>
<div id="a">×</div>
<div id="b"><img src="bot.jpg"></div>
</body>
</html>
拜拜
