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日

悬赏问题

  • ¥100 数字取证课程 关于FAT文件系统的操作
  • ¥15 如何使用js实现打印时每页设置统一的标题
  • ¥15 安装TIA PortalV15.1报错
  • ¥15 能把水桶搬到饮水机的机械设计
  • ¥15 Android Studio中如何把H5逻辑放在Assets 文件夹中以实现将h5代码打包为apk
  • ¥15 使用小程序wx.createWebAudioContext()开发节拍器
  • ¥15 关于#爬虫#的问题：请问HMDB代谢物爬虫的那个工具可以提供一下吗
  • ¥15 vue3+electron打包获取本地视频属性，文件夹里面有ffprobe.exe 文件还会报错这是什么原因呢？
  • ¥20 用51单片机控制急停。
  • ¥15 孟德尔随机化结果不一致