<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#div{
width: 100px;
height:100px;
background-color: #f00;
position: absolute;
/*left是往右移动的*/
/*left:100px; */
}
button{
position: relative;
top: 120px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="div"></div>
<button>点击开始</button>
<button>点击停止</button>
<script>
// 逻辑：1.一个元素动起来，其实就是位置的移动
// 2.连续动起来需要一个定时器（有一个开关才行，为防止多个定时器累积）
// 需要对移动做条件（当移动距离大于body宽度或小于0）
// 当满足两个条件 做相反移动
let buts = document.getElementsByTagName('button')
let div = document.getElementById('div')
let body = document.body
let num = 0
let timer = null
buts[0].onclick = function() {
// 声明一个变量speed，也就是移动的速度
let speed = 5;
if(timer==null){
timer = setInterval(()=>{
num+=speed
div.style.left = num+'px'//元素移动的核心
// 当距离大于body宽度或小于0
if(num>=body.offsetWidth-div.offsetWidth||num<=0){
// 速度变量取反
speed = -speed;
}
},100)
}
}
buts[1].onclick = function(){
clearInterval(timer);
timer=null;
}
</script>
</body>
</html>
