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

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条回答 默认 最新

  • 最佳回答

    除以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>
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题