匀速运动

最新推荐文章于 2022-04-21 09:06:36 发布

原创最新推荐文章于 2022-04-21 09:06:36 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，其中使用JavaScript来控制一个红色方块移动到指定位置的过程。通过监听按钮点击事件，使该方块从初始位置平滑地移动到目标位置。此示例展示了如何利用基本的HTML、CSS样式及JavaScript来实现元素的动态效果。

<!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>