js匀速运动

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
             100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>
<body>
    <button id="btn">move</button>
    <div class="box"></div> 
    <script>
        // 单击按钮 让div匀速运动到500px停止
        var btn = document.getElementById("btn");
        var oDiv = document.querySelector("div");
        var timer = null;
        btn.onclick=function(){
        	 clearInterval(timer);
        	 timer=setInterval(move,100);
        }
        var num=0;
        function move(){
        	num+=5;
        	if(num>1000){
        		clearInterval(timer)
        	}else{
        		oDiv.style.left=num+"px";
        	}
        }
    </script>