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

  • Go 旅城通票 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日

悬赏问题

  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败
  • ¥15 ZABBIX6.0L连接数据库报错，如何解决？(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码