核心原理：通过定时器setInterval()不断移动盒子位置。
    实现步骤：
    1.获得盒子当前位置
    2.让盒子在当前位置加1个移动距离
    3.利用定时器不断重复这个操作
    4.加一个结束定时器的条件
    5.注意此元素需要添加定位，才能使用element.style.left

    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.     </style>
    21. </head>
    22. <body>
    23.     <div></div>
    25.     <script>
    26.         //获取元素
    27.         var div = document.querySelector('div');
    28.         //让盒子在当前位置+1距离
    29.         //定时器重复操作，最后清除定时器
    30.         var timer = setInterval(function(){
    31.             //获得盒子当前的位置
    32.             var x = div.offsetLeft;
    33.             if(x >= 400){
    34.                 clearInterval(timer);
    35.             }
    36.             div.style.left = x + 1 + 'px';
    37.         },30);
    38.     </script>
    39. </body>
    40. </html>

    .