匀速运动

    <button>动画</button>
    <div class="box" style="left:0px;position: absolute;  100px;height: 100px;background-color: pink;"></div>

<script>
   var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];

    //1、闪动
    //    btn.onclick = function () {
    //        div.style.left = "500px";
    //    }

    //2、匀速运动
    btn.onclick = function () {
        //定时器，每隔一定的时间向右走一些
        setInterval(function () {
            console.log(parseInt(div.style.left));
            //动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
            //方法1：用offsetLeft获取值，用style.left赋值。
            div.style.left = div.offsetLeft + 100 + 'px';

            // 方法2：必须一开始就在DOM节点上添加 style="left: 0px;"属性，才能用方法2。否则， div.style.left 的值为 NaN
            // div.style.left = parseInt(div.style.left)+100+"px";  //方法2：
        }, 500);
    };
</script>