Función de envoltura de animación

¿Cómo hacemos que un cuadro se mueva en la página? Esta es la base de los efectos dinámicos de la página, como las imágenes de carrusel. De hecho, es fácil pensar que podemos usar el  temporizador setInterval() . Estamos acostumbrados a encapsular en una función, de modo que haya Los elementos requeridos pueden llamar directamente a esta función, lo que simplifica el código

---

Función de envoltura:

<script>
        document.addEventListener('DOMContentLoaded',function(){
            var box=document.querySelector('div');
            var btn=document.querySelector('button');
            function run(obj,long){
                clearInterval(obj.timer)   //排他思想，先清除一次定时器，防止多次点击按钮产生加速的效果
                obj.timer=setInterval(function(){
                    if(obj.offsetLeft>=long){
                        window.clearInterval(obj.timer);
                    }else{
                        obj.style.left=obj.offsetLeft+1+'px';
                    }
                },20)
            }

            btn.addEventListener('click',function(){
                 run(box,3000)
            })
        })

Al llamar, solo necesita animar el elemento y ponerlo en el parámetro de función, y la distancia a la que el objetivo detiene la animación.