js实现移动的div

css

*{
margin: 0;
padding: 0;
}
div#box{
width: 100px;
height: 100px;
background: pink;
position: absolute;
}

html

	<input type="button" value="移动400px" id="btn">
	<div id="box"></div>

js

// 获取 btn按钮
var btn = document.getElementById(“btn”)
// 获取div box
var box = document.getElementById(“box”)

		// 绑定单击事件 btn
		btn.onclick = function(){
			var timeId = setInterval(function(){
				// 获取div距离左侧的距离
				var current = box.offsetLeft
				console.log(current)
				// 定义一个变量 bushu 设置每次移动多少步
				var bushu = 10
				// 每次移动后的距离
				current+=bushu
				console.log(current)
				// 判断当前移动后的距离是否到达目标位置
				if(current <400){
					// 设置div距离左侧的距离
					box.style.left = current+"px"
				}else{
					// 清除定时器
					clearInterval(timeId)
				}
			},100)
		}