匀速运动

清疚 2022-07-14 11:20 138阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <style>
          div{
             width:100px;
             height:100px;
             background-color:red;
             position:absolute;
             height:100px;
             left:500px }
       </style>
    </head>
    <body style="height:2000px;">
       <script>
            window.onload=function () {
                var timer=null;
                function startMove(target) {
                    var speed=10;
                    clearInterval(timer);
                    var oDiv=document.getElementById('div');
                    timer=setInterval(function () {
                        if(oDiv.offsetLeft<target){
                            speed=7;
                   }else{
                            speed=-7;
                   }
                        if(Math.abs(oDiv.offsetLeft-target)<7){  //是否到达终点
                            clearInterval(timer);  //到达终点后
                            oDiv.style.left=target+'px';
                        }else{
                            oDiv.style.left=oDiv.offsetLeft+speed+'px';//到达终点前
                        }
                    },30)
                }
                var oInput=document.getElementById('button');
                oInput.addEventListener('click',function(){
                    startMove(300);
             },false)
            }
       </script>
       <input type="button" value="开始运动" id="button">
       <div id="div"></div>
       <span style="width:1px;height:300px;position:absolute;left:300px;top:0;background:black;"></span>
    
    </body>
    </html>