JS实现物体运动

最新推荐文章于 2022-12-04 11:21:46 发布

东方求败、

最新推荐文章于 2022-12-04 11:21:46 发布

阅读量711

点赞数

分类专栏： javascript复习之路 # javascript面向对象文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/wang_swa99er/article/details/123054054

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript面向对象

10 篇文章 0 订阅

订阅专栏

JS实现物体运动

案例：简单的运动，让一个div从左到右运动

代码编写要注意的问题：
1.停不下来
2.当速度取某些数的时候停不下来
3.到达目的值以后点击还会继续运动
if…else 将运动分开
4.重复点击按钮速度加快
保证只有一个定时器在启动
每次启动定时器之前，将上次定时器关闭

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{margin: 0px;padding: 0px;} 
            #div1{width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 100px;}
        </style>
        <script>
          /* 
              动画    图像
              原理：能够识别的最小的时间间隔是18帧。
              动画：只需要让动画的切换时间间隔大于18帧，一般情况下电影院里面放映的电影24帧

          */
          /* 
              运动框架：(写任何运动都需要)
                  1.if..else 将运动分开
                  2.每次启动定时器之前，将上次定时器关闭
          */
          window.onload =function(){
              var oDiv1 = document.getElementById("div1");
              var oBtn = document.getElementById("btn1");
              
              // 运动速度
              var speed = 5;
              var timer = null;
              oBtn.onclick = function(){
              	// 每次点击将上一次定时器清除
                  clearInterval(timer);
                    timer = setInterval(function(){
                      if(oDiv1.offsetLeft >= 500){
                      clearInterval(timer);
                  }else
                        oDiv1.style.left = oDiv1.offsetLeft + speed + 'px';
                    },30);
              }
          }
        </script>
    </head>
    <body>
        <button id = "btn1">开始运动</button>
        <div id="div1"></div>
    </body>
</html>

效果：
div运动

东方求败、

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现物体运动

JS实现物体运动案例：简单的运动，让一个div从左到右运动代码编写要注意的问题：1.停不下来2.当速度取某些数的时候停不下来3.到达目的值以后点击还会继续运动if…else 将运动分开4.重复点击按钮速度加快保证只有一个定时器在启动每次启动定时器之前，将上次定时器关闭<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <m
复制链接

扫一扫