时间戳

首页 > 解决方案 > 如何停止物体的运动

javascript - 如何停止物体的运动

问题描述

这是我所拥有的：

      <div class="Null"></div>
      <script>
          document.querySelector("body").addEventListener('mousemove', Null);
          function Null(){
         var Null = document.querySelectorAll(".Null");
          Null.forEach(function (Null) {
          let x = (Null.getBoundingClientRect().left) + (Null.clientWidth / 2);
         let y = (Null.getBoundingClientRect().top) + (Null.clientHeight / 2);
         let radian = Math.atan2(event.pageX - x,event.pageY - y);
          let rot = (radian * (180 / Math.PI) * -1) + 270;
         Null.style.transform = "rotate("+ rot +"deg)";
         })
        }

</script>
<style>
 /*Da EyE!?*/
  .Null {
  pointer-events: none;
  position: fixed;
  height: 0px;
  width: 0px;
  padding: 120px;
  background: ;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  border-radius: 50%;
  border: 10px solid rgb(0, 0, 0, 0.21);
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  }
  .Null:before {
  content: "";
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border: 10px solid rgb(0, 0, 0, 0.1);
  border-bottom-color: transparent;
  border-top-color: transparent;
 border-right-color: transparent;
  border-radius: 50%;
 }
</style>

我希望半圆在单击“x”时停止跟随光标（在键盘上），当再次单击“x”时，它将再次跟随光标，我也希望它停在与当你点击“x”时，我试过这个：

      <div class="Null"></div>
      <script>
      document.querySelector("body").addEventListener('mousemove', Null);

      function Null() {
      var Null = document.querySelectorAll(".Null");
      Null.forEach(function(Null) {
      let x = (Null.getBoundingClientRect().left) + (Null.clientWidth / 2);
      let y = (Null.getBoundingClientRect().top) + (Null.clientHeight / 2);
      let radian = Math.atan2(event.pageX - x, event.pageY - y);
      let rot = (radian * (180 / Math.PI) * -1) + 270;
      Null.style.transform = "rotate(" + rot + "deg)";
      })
    }
    // TankOn 1st E click
    var TankOn = true;
      //TankOff Next
    function toggleTank() {
    TankOn ? Tank0n() : TankOff();
    TankOn = !TankOn;
    }

   function Tank0n() {
     var Null = "No"
    }

    function TankOff() {
     var Null = document.querySelectorAll(".Null");
    }
   </script>
   <style>
    /*Da EyE!?*/
  
    .Null {
    pointer-events: none;
    position: fixed;
    height: 0px;
    width: 0px;
    padding: 120px;
    background: ;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    border-radius: 50%;
    border: 10px solid rgb(0, 0, 0, 0.21);
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    }
  
    .Null:before {
    content: "";
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border: 10px solid rgb(0, 0, 0, 0.1);
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    }
    </style>

我确实尝试“结束”该功能，但这没有用，有什么想法吗？（看起来半圆没有跟随 Stack Overflow 中的光标，例如）：https ://matrixmod.glitch.me/test.html

标签： javascript

解决方案

基本上，您没有检测按键输入的代码，而且您也没有TankOn在Null函数中使用变量。

我添加了一个检测按键的功能，然后您可以验证它是否是“x”

document.addEventListener("keypress", function(e) {
  e = e || window.event;
  if (e.key === 'x' || e.keyCode === 120) {
    toggleTank();
  }
})

之后，我在您的方法顶部添加了一个验证，Null以查看 的值是否TankOn为 false 我将停止运行该函数。

function Null() {
  if (!TankOn) {
    return;
  }
...

我删除了一些你必须稍微清理代码的其他方法，你可以在这里查看一个工作示例：（首先单击输出屏幕，以便检测你的按键）

document.querySelector('.body').addEventListener('mousemove', Null);

function Null() {
  if (!TankOn) {
    return;
  }
  var Null = document.querySelectorAll('.Null');
  Null.forEach(function(Null) {
    let x = Null.getBoundingClientRect().left + Null.clientWidth / 2;
    let y = Null.getBoundingClientRect().top + Null.clientHeight / 2;
    let radian = Math.atan2(event.pageX - x, event.pageY - y);
    let rot = radian * (180 / Math.PI) * -1 + 270;
    Null.style.transform = 'rotate(' + rot + 'deg)';
  });
}

var TankOn = true;

function toggleTank() {
  TankOn = !TankOn;
}

document.addEventListener("keypress", function(e) {
  e = e || window.event;
  if (e.key === 'x' || e.keyCode === 120) {
    toggleTank();
  }
})
.body {
  height: 100vh;
}

.Null {
  pointer-events: none;
  position: fixed;
  height: 0px;
  width: 0px;
  padding: 120px;
  background: red;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  border-radius: 50%;
  border: 10px solid rgb(0, 0, 0, 0.21);
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}

.Null:before {
  content: '';
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border: 10px solid rgb(0, 0, 0, 0.1);
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
}
<div class="body">
  <div class="Null"></div>
</div>

此外，我建议您为函数、变量和类使用不同的名称，以便更容易理解，并避免使用不同大小写的保留名称以避免混淆。

推荐阅读