萌新问大佬，求解答，在线等 - javascript吧

level 3

紫焰光影楼主

按键一：让div想左平移，按键二：div向右平移，
按键一功能是挺正常的，为什么按按键二，div一下子就跳到终点。。
思索了一晚上找不出问题来，求助贴吧大佬，在线等。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#a1{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
#a2{
width: 2px;
height: 1000px;
background-color: black;
position: absolute;
left: 800px;
top: 0;
}
</style>
<body>
<button id="b1">红色向右移动</button>
<button id="b2">红色向左移动</button>
<div id="a1"></div>
<div id="a2"></div>
</body>
<script>
var a1 = document.getElementById("a1");
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
function getStyle(obj,name) {
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
function running(name,obj,speed,target) {
name.onclick = function () {
//关闭上一个启动器
clearInterval(obj.tiemr);
//开始执行函数
obj.tiemr = setInterval(function () {
//获取元素（obj）现在的位置
var oldvalue2 = parseInt(getStyle(obj,"left"));
var oldvalue = getStyle(obj,"left");
//根据终点与现在距离判断方向
console.log(oldvalue2);
console.log(target);
if (oldvalue2>target){
speed*=-1;
}
console.log(oldvalue>target)
// console.log(speed);
//向终点慢慢移动
var newvalue = parseInt(oldvalue)+speed;
//判断什么时候到了终点，且处理产生的偏差，毕竟速度不一样，补齐之
if (newvalue>target&&speed>0||newvalue<target&&speed<0){
newvalue=target;
};
//如果当前位置超过了终点，则补齐
// if (newvalue>target){
// newvalue = target;
// }
//试装移动
obj.style.left = newvalue +"px";
//假设到达了终点，则关闭定时器
if(newvalue==target){
clearInterval(obj.tiemr);
}
},30)//定时器每隔多少毫秒执行一次
}
}
running(b1,a1,10,800);
running(b2,a1,10,0);
function run(whos,obj,speed,target){
whos.onclick = function () {
clearInterval(obj.tiemr);//关闭上一个启动器
obj.tiemr = setInterval(function () {
var oldvalue = getStyle(obj,"left");
// var speed = 10
if(parseInt(oldvalue)>target){
speed*=-1;
}
var newvalue = parseInt(oldvalue)+speed;
if (newvalue>target&&speed>0||newvalue<target&&speed<0){
newvalue=target;
};
// if (newvalue<target){
// newvalue = target;
// }
obj.style.left = newvalue +"px";
if(newvalue==target){
clearInterval(obj.tiemr);
}
},30)
}
}
</script>
</html>

2020年02月11日 14点02分 1

level 3

紫焰光影楼主