点击按钮div可以向右移动，向左移动，详细代码如下：
<!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>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
//定义一个变量
var time;
window.onload = function () {
//获取box1,btn01
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//点击按钮box1向右移动
btn01.onclick = function () {
//关闭上一个定时器
clearInterval(time);
//开启一个定时器
time = setInterval(function () {
//获取box1原来的值
var oldValue = parseInt(getStyle(box1, "left"));
//在旧值得基础上增加
var newValue = oldValue + 11;
//判断newValue是否大于800
if (newValue > 800) {
newValue = 800;
}
//将新值设置为box1
box1.style.left = newValue + "px";
//当元素移动到800px时，使其停止执行移动
if (newValue == 800) {
//达到目标，关闭定时器
clearInterval(time);
}
}, 30);
};
//点击按钮box1向左移动
btn02.onclick = function () {
move(box1, 10, 0)//speed不用考虑正负值
};
};
/*
定义一个函数，用来获取指定元素的当前的样式
参数： obj：要获取样式的元素
name：要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
return getComputedStyle(obj, null)[name];//正常浏览器
} else {
return obj.currentStyle[name];//IE浏览器
}
}
//创建一个可以简单执行动画的函数，当在调用的时候就不用像第一个（点击按钮box1向右移动）一样写那么多代码
/*
参数：
obj:要执行动画的对象
speed：要传进来的速度(正值向右移动，负值向左移动)
target：执行动画的目标位置
*/
function move(obj, speed, target) {
//关闭上一个定时器
clearInterval(time);
//获取元素当前的位置
var current = parseInt(getStyle(obj, "left"));
//判断速度正负值0-800speed为正，800-0speed为负
if (current > target) {
//此时速度为负值
speed = -speed;
}
//开启一个定时器
time = setInterval(function () {
//获取box1原来的值
var oldValue = parseInt(getStyle(obj, "left"));
//在旧值得基础上增加
var newValue = oldValue + speed;
//800向0移动，向左移动，需要判断newValue是否小于target
//0到800移动，向右移动，需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置为box1
obj.style.left = newValue + "px";
//当元素移动到0px时，使其停止执行移动
if (newValue == target) {
//达到目标，关闭定时器
clearInterval(time);
}
}, 30);
}
</script>
</head>
<body>
<button id="btn01">点击按钮box1向右移</button> <button id="btn02">点击按钮box1向左移</button><br><br>
<div id="box1"></div>
<div style="width:0;height:1000px;border-left:1px black solid;position:absolute;left:800px;top: 0;"></div>
</body>
</html>
点击按钮box1向右移动：
?
?点击按钮box1向左移动：
?