缓速运动

HTML结构

 <button id="but">点击移动</button>
    <div id="div">

    </div>      

CS：

  div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: chartreuse;
        }

JS部分：

    var but=document.getElementById('but')
        var div=document.getElementById('div')
        var target=800
        //缓速运动
        but.onclick=function(){
        //预设置定时器，最好先清除定时器
            clearInterval(div.timer)
            div.timer=setInterval(function(){
                //设置开始的值
                var star=div.offsetLeft
                //计算单位移动距离
                var step=target-star            
                 step=step/10
                 //判断是从左到右还是从右到左
                 step>0?step=Math.ceil(step):step=Math.floor(step)
                //  累加初始位置和移动距离
                 var num=step+star
                 //赋值给div的属性
                 div.style.left=num+'px'
                 if(num==target){
                     clearInterval(div.timer)
                 }
                 console.log(1)   //验证定时器是否关闭            
            },50)
        }