m0_46602893 2021-05-12 12:34 采纳率: 91.5%
浏览 22
已结题

JS缓冲运动的问题？

<!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>
            #box{width: 200px;height: 200px;top: 300px;background-color: red;position: absolute}
            #deadline{width: 1px;height: 900px;background-color: black;position: absolute;left: 1000px;}
      </style>
      <script>
            window.onload = function(){
                  var BTN = document.getElementById("btn");
                  BTN.onclick = function(){
                        Starmove(1000);
                  }
            }
            var timer = null;
            var Starmove = function(goal){
                  var BOX = document.getElementById("box");
                  var speed = (goal - BOX.offsetLeft)/18;
                  clearInterval(timer);
                  timer = setInterval(function(){
                        if(BOX.offsetLeft == goal ){
                              clearInterval(timer);
                        }else{
                              BOX.style.left = BOX.offsetLeft + speed + "px"
                        }
                  },30)
            }
      </script>
</head>
<body>
      <button id="btn">开始运动</button>
      <div id="box"></div>
      <span id="deadline"></span>
</body>
</html>

上述代码中：两个问题：

1：当var speed = (goal - BOX.offsetLeft)/18;时，为什么box方块会出界？而只有设置var speed = (goal - BOX.offsetLeft)/8的时候不会出界？

2：我已经设置了

if(BOX.offsetLeft == goal ){

                              clearInterval(timer);

所以我认为无论我给speed设置一个怎样的数字，它都会最终停在目的地，为什么这个当我给speed  = 5的时候它不会停止，而是无限运动出界？

  • 写回答

1条回答 默认 最新

  • 斯洛文尼亚旅游 2021-05-12 13:48
    关注

    除以18 speed出现小数点变为浮点数，浮点数计算四则运算时会有精度丢失问题，导致BOX.offsetLeft == goal不匹配。

    除以8 speed为整数，没有精度问题，所以能停止

    要改下逻辑，offsetleft大于goal就设置为goal防止浮点数计算精度丢失的问题

    <!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>
            #box{width: 200px;height: 200px;top: 300px;background-color: red;position: absolute}
            #deadline{width: 1px;height: 900px;background-color: black;position: absolute;left: 1000px;}
      </style>
      <script>
            window.onload = function(){
                  var BTN = document.getElementById("btn");
                  BTN.onclick = function(){
                        Starmove(1000);
                  }
            }
          var timer = null;
          var Starmove = function (goal) {
              var BOX = document.getElementById("box");
              var speed = (goal - BOX.offsetLeft) / 18;

              clearInterval(timer);
              timer = setInterval(function () {
                  var left = BOX.offsetLeft + speed;
                  if (left > goal) {
                      clearInterval(timer);
                      left = goal;////////
                  }
                  BOX.style.left = left + "px"

              }, 30)
          }
      </script>
</head>
<body>
      <button id="btn">开始运动</button>
      <div id="box"></div>
      <span id="deadline"></span>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 9月4日
  • 已采纳回答 8月27日

悬赏问题

  • ¥30 关于#opencv#的问题：使用大疆无人机拍摄水稻田间图像，拼接成tif图片，用什么方法可以识别并框选出水稻作物行
  • ¥15 Python卡尔曼滤波融合
  • ¥20 iOS绕地区网络检测
  • ¥15 python验证码滑块图像识别
  • ¥15 根据背景及设计要求撰写设计报告
  • ¥20 能提供一下思路或者代码吗
  • ¥15 用twincat控制！
  • ¥15 请问一下这个运行结果是怎么来的
  • ¥15 单通道放大电路的工作原理
  • ¥30 YOLO检测微调结果p为1