现有函数的快捷键和快捷键

Question

目前我有控制月球车的按钮。例如，一个被称为“前进”，当按下时加速，但当释放时再次停止月球车。现在我想通过按键实现对漫游车的控制。例如，"w“应该在keydown上加速，在keyup上停止。到目前为止，我所找到的站点并没有展示如何在用于keydown和keyup的JS中包含我已经存在的函数。我自己不能写出足够好的代码来弄明白这一点。它们只显示如何在按下键时打印消息。有人能帮帮我吗？

EDIT2:我编辑关键字的解决方案就在这里

function functForward{
    var myRPM = document.getElementById('slider').value;
    var myAng = document.getElementById('slider2').value;

    //functForward code
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      var request = "?drive=1" + "&rpm=" + myRPM + "&ang=" + myAng;
      console.log(request);
      xhttp.open("GET", request, true);
      xhttp.send();
}

function functStopDrive(){
    var myRPM = document.getElementById('slider').value;
    var myAng = document.getElementById('slider2').value;

    //funcstopdrive code
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      var request = "?drive=0" + "&rpm=" + myRPM + "&ang=" + myAng;
      console.log(request);
      xhttp.open("GET", request, true);
      xhttp.send();
}

var addEvent = document.addEventListener ? function(target, type, action) {
  if (target) {
    target.addEventListener(type, action, false);
  }
} : function(target, type, action) {
  if (target) {
    target.attachEvent('on' + type, action, false);
  }
}

addEvent(document, 'keydown', function(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;
  if (key === 87) {
    functForward();
  }
});
addEvent(document, 'keyup', function(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;
  if (key === 87) {
    functStopDrive();
  }
});

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> 
</script>
<div class="col-sm-4">
<button id="Forward" type="button" class="btn btn-success btn-lg btn-block" 
ng-mousedown="functForward();" ng-mouseup="functStopDrive();">Forward</button>
</div>

<div id="slidecontainer">
 <input type="range" ng-model="myRPM" min="0" max="8000" id="slider" step="500">

 <input type="range" ng-model="myAng" min="-60" max="60" id="slider2" step="5">
</div>

Answer 1

您可以使用附加到document对象的函数onkeydown和onkeyup。

编辑1个

我已经编辑了答案，将函数与键侦听器分开，以便可以通过按钮访问它们。

编辑2

首先，我将使滑块不仅具有classes，还具有ids，因为这将使您更容易进行解析。

我建议您在每次运行函数时向DOM询问值，而不是像您所做的那样将值传递给函数，就像我编辑以下代码所做的那样：

​

function functforward{
        var myRPM = document.getElementById('slider').value;
        var myAng = document.getElementById('slider2').value;

        //funcforward code
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("demo").innerHTML = this.responseText;
            }
          };
          var request = "?drive=1" + "&rpm=" + myRPM + "&ang=" + myAng;
          console.log(request);
          xhttp.open("GET", request, true);
          xhttp.send();
}

function functStopDrive(){
        var myRPM = document.getElementById('slider').value;
        var myAng = document.getElementById('slider2').value;

        //funcstopdrive code
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("demo").innerHTML = this.responseText;
            }
          };
          var request = "?drive=0" + "&rpm=" + myRPM + "&ang=" + myAng;
          console.log(request);
          xhttp.open("GET", request, true);
          xhttp.send();
}

document.onkeydown = function (e) {
    if(e.key == 81){
         functForward();
    }
}

document.onkeyup = function (e) {
    if(e.key == 81){
        functStopDrive();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-sm-4">
  <button id="Forward" type="button" class="btn btn-success btn-lg btn-block" ng-mousedown="functForward();" ng-mouseup="functStopDrive();">Forward</button>
</div>

<div id="slidecontainer">
  <input type="range" ng-model="myRPM" min="0" max="8000" id="slider" 
step="500">

  <input type="range" ng-model="myAng" min="-60" max="60" 
id="slider2" step="5">
</div>

​