<div></div><!-- <span></span> --><button class="btn1">点击500</button><button class="btn2">点击800</button>

 div{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;margin-top: 100px;}/* span{display: block;width: 50px;height: 50px;background-color: gold;margin-top: 200px;position: absolute;top: 0;left: 0;} */

    <script>// 创建简单的动画函数封装效果(目标对象，目标位置)function animate(obj,target,callback){//callback回调函数相当于 ：callback = function(){},是零时添加的形参//清楚时间效果的同时，只留下一个时间效果clearInterval(obj.timer);obj.timer = setInterval(function(){//步长值写道定时器里面(缓动动画效果)// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;//当step大于0，就向上取值，要不向下取值，然后在赋值给stepstep = step >  0 ? Math.ceil(step) : Math.floor(step);//进行距离的判断//如果当前的位置等于目标位置if(obj.offsetLeft == target){//清楚当前的时间效果clearInterval(obj.timer);//判断有没有这个回调函数if(callback){callback();}}//更改的位置等于 = 当前位置 + 每次移动的距离obj.style.left = obj.offsetLeft + step + 'px';},30)}var div = document.querySelector('div');var btn1 = document.querySelector('.btn1');var btn2 = document.querySelector('.btn2');btn1.onclick = function(){animate(div,500,function(){// alert('你好吗？');div.style.backgroundColor = 'green';});}btn2.onclick = function(){animate(div,800);}// animate(span,300);</script>

实现效果：