如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
    核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试</title>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         div{
    14.             position: absolute;
    15.             left: 0;
    16.             width: 100px;
    17.             height: 100px;
    18.             background-color: pink;
    19.         }
    20.         span{
    21.             position: absolute;
    22.             top: 100px;
    23.             left: 0;
    24.             display: block;
    25.             width: 100px;
    26.             height: 100px;
    27.             background-color: purple;
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.     <button>紫色盒子</button>
    33.     <div></div>
    34.     <span></span>
    36.     <script>
    37.         //简单动画函数封装  obj目标对象  target目标位置
    38.         //给不同的元素指定了不同的定时器
    39.         //当我们不断地点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
    40.         // 解决方案：让我们元素只有一个定时器执行
    41.         function animate (obj,target) {
    42.             clearInterval(obj.timer);
    43.             //让盒子在当前位置+1距离
    44.             //定时器重复操作，最后清除定时器
    45.             obj.timer = setInterval(function(){
    46.             //获得盒子当前的位置
    47.             var x = obj.offsetLeft;
    48.             if(x >= target){
    49.                 clearInterval(obj.timer);
    50.             }
    51.             obj.style.left = x + 1 + 'px';
    52.             },30);
    53.         }
    54.         //获取元素
    55.         var div = document.querySelector('div');
    56.         var span = document.querySelector('span');
    57.         var btn = document.querySelector('button');
    58.         animate(div,300);
    59.         btn.addEventListener('click',function(){
    60.             animate(span,200);
    61.         });
    62.     </script>
    63. </body>
    64. </html>

    .