<body>
<button id="begin">开始运动</button>
<button id="stop">停止运动</button>
<div></div>
<script>
let begin = document.querySelector('#begin');
let cease = document.querySelector('#stop');
let div = document.querySelector('div');
/* let target = 600;
let direction = "top" */
let timer;
begin.onclick = function () {
animate(div, {left:0,top:0});
}
function animate(el, obj) {
timer = setInterval(() => {
let count =0;
for (key in obj) {
let target = obj[key];
let current = parseInt(getComputedStyle(el)[key]);
console.log(obj.current);
let speed = (target - current) / 10;
console.log(target,current);
if (speed < 0) {
speed = Math.floor(speed);
} else {
speed = Math.ceil(speed);
}
el.style[key] = current + speed + "px";
//当前的值等于目标值清除定时器
if (speed == 0) {
clearInterval(timer);
}
}
}, 200);
}
cease.onclick = function () {
clearInterval(timer);
}
</script>
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/806616990086139.jpg "#left")
原来位置left: 50px; top: 400px;
js目标移动到left:0,top:0
执行完left后定时器就停止了,top还没走到0