匀速运动

来源：互联网发布：人工智能的文献综述编辑：程序博客网时间：2024/06/07 01:23
<!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>
0 0