在密码39和37上我需要帮助来移动div

Question

伙计们，我有一个div，点击它时，它是正确的， 现在我需要帮助，在按键代码39时向右移动，在按键37时向左移动。

 myDiv.onclick = function() {
      animate(function(timePassed) {
        myDiv.style.left = timePassed / 5 + 'px';
      }, 3000);
    };

    // Рисует функция draw
    // Продолжительность анимации duration
    function animate(draw, duration) {
      var start = performance.now();

      requestAnimationFrame(function animate(time) {
        // определить, сколько прошло времени с начала анимации
        var timePassed = time - start;

        console.log(time, start)
          // возможно небольшое превышение времени, в этом случае зафиксировать конец
        if (timePassed > duration) timePassed = duration;

        // нарисовать состояние анимации в момент timePassed
        draw(timePassed);

        // если время анимации не закончилось - запланировать ещё кадр
        if (timePassed < duration) {
          requestAnimationFrame(animate);
        }

      });
    }

 #myDiv {
    position: relative;
    cursor: pointer;
    height: 150px;
    width: 220px;
    background-color: red;
    }

<div id="myDiv"> </div>

Answer 1

您可以使用以下代码来检测是否按下了某个键

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

在下面的代码段中，我使用了keyCode 97字母A

您可以使用所需的密码替换它，然后拨打animate功能

＆＃13;

＆＃13;

document.onkeypress = function(e) {
  e = e || window.event;
  // use e.keyCode
  //if (e.keyCode == 39 || e.keyCode == 37) {
  if(e.keyCode == 97){
    animate(function(timePassed) {
      myDiv.style.left = timePassed / 5 + 'px';
    }, 3000);
  }
};

function animate(draw, duration) {
  var start = performance.now();

  requestAnimationFrame(function animate(time) {
    // определить, сколько прошло времени с начала анимации
    var timePassed = time - start;

    console.log(time, start)
      // возможно небольшое превышение времени, в этом случае зафиксировать конец
    if (timePassed > duration) timePassed = duration;

    // нарисовать состояние анимации в момент timePassed
    draw(timePassed);

    // если время анимации не закончилось - запланировать ещё кадр
    if (timePassed < duration) {
      requestAnimationFrame(animate);
    }

  });
}

＆＃13;

#myDiv {
  position: relative;
  cursor: pointer;
  height: 150px;
  width: 220px;
  background-color: red;
}

＆＃13;

<div id="myDiv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要添加keydown事件侦听器。

document.addEventListener("keydown", function(e) {
  e = e || window.event;
  switch (e.which || e.keyCode) {
    case 37:
      // go left code
      alert("left");
      break;
    case 39:
      // go right code
      alert("right");
      break;
  }
});

Here is an example with your code，只需将动画逻辑添加到案例中......