SOURCE

console 命令行工具 X clear

                    
>
console
var ele1 = document.getElementById('box1')
var ele2 = document.getElementById('box2')
var speed1 = document.getElementById('speed1')
var speed2 = document.getElementById('speed2')

function animate(ele,spd){
    var start = Date.now(); // remember start time
    var timer = setInterval(function() {
        var timePassed = Date.now() - start;
        var step = Number(Math.abs(timePassed - 5000)/1500)
        speed1.innerHTML = (step).toFixed(2)
        if (timePassed >= 5000) {
            clearInterval(timer); // finish the animation after 2 seconds
            return;
        }
        ele.style.left = ele.offsetLeft + step + 'px'
    }, spd);
}


animate(ele1, 16)

function animate1(ele,target,spd){
    var timer = setInterval(function() {
        var step = (target-ele.offsetLeft)/100;
        //对步长进行二次加工(大于0向上取整,小于0向下取整)
        step = step>0?step:Math.floor(step);
      	speed2.innerHTML = step
        //动画原理: 目标位置 = 当前位置 + 步长
        ele.style.left = ele.offsetLeft + step + "px";
        //检测缓动动画有没有停止
        if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
            //处理小数赋值
            ele.style.left = target + "px";
            clearInterval(timer);
        }
    }, spd);
}
animate1(ele2,500, 16)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div class='wrap'>
    <p>一个div滑动的动画,由快至慢5s结束</p>
    <p>速度: <span id='speed1'></span></p>
    <div class="box1" id="box1"></div>
  </div>
  <div class='wrap'>
    <p>一个div滑动的动画,由快至慢到500px结束</p>
    <p>速度: <span id='speed2'></span></p>
   <div class="box2" id="box2"></div>    
  </div>
</body>
</html>
.wrap {
  height:150px;
  position:relative;
}
.box1{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    left:0
}
.box2{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    left:0;
    top:70px;
}