移动盒子 - 码农教程

<!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>
原文地址：https://www.cnblogs.com/gracexin/p/15114105.html