如何在keydown上编码多个键？ （JavaScript的）

Question

我试图拥有每个键，按下时对应不同的图像。 （例如：＆＃34; A＆＃34;按下=图像1出现，按＆＃34; S＆＃34;按下=图像2出现，依此类推。）

我能够得到＆＃34; S＆＃34;工作的关键，但不是A.我试图在键盘的整行上做这个（＆＃34; A＆＃34;，＆＃34; S＆＃34;，＆＃34; D＆＃ 34;，＆＃34; F＆＃34;＆＃34; G＆＃34;＆＃34; H＆＃34;＆＃34; J＆＃34;＆＃34; K＆＃34;＆＃ 34; L＆＃34）

* PS。我还是初学者：）

这是我的代码：

<img src="images/giphy.gif" width="800" height="400" alt=""/>

<script>
  document.addEventListener("keydown", keyDownBody, false);

  function keyDownBody(e) {
    var keyCode = e.keyCode;
    if(keyCode==65) {
      myFunction();
    }
  }

function myFunction() {
var x = document.createElement("IMG");
x.setAttribute("src", "images/giphy1.gif")
x.setAttribute("width", "800");
x.setAttribute("height", "400");
x.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(x);
}

function keyDownBody(e) {
    var keyCode = e.keyCode;
    if(keyCode==83) {
      myFunction();
    }
  }

function myFunction() {
var x = document.createElement("IMG");
x.setAttribute("src", "images/sun.gif")
x.setAttribute("width", "800");
x.setAttribute("height", "400");
x.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(x);
}
</script>

Answer 1

您已多次声明相同的功能。您可以合并它们以使其工作，并使您的代码更具可读性。一个例子：

document.addEventListener("keydown", keyDownBody, false);

function keyDownBody(e) {
  var keyCode = e.keyCode;
  switch (keyCode) {
    case 65:
        loadImage("images/giphy1.gif", "The Pulpit Rock");
        break;
    case 83:
        loadImage("images/sun.gif", "The Pulpit Rock");
        break;

    // Etc.
  }
}

function loadImage(uri, alt) {
    var x = document.createElement("IMG");
    x.setAttribute("src", uri)
    x.setAttribute("width", "800");
    x.setAttribute("height", "400");
    x.setAttribute("alt", alt);
    document.body.appendChild(x);
}

这样您可以根据需要添加任意数量的密钥。

或者，如果将图像放入数组中，则可以动态加载图像：

var images = [{
      uri: 'images/giphy1.gif',
      alt: 'A',
    }, {
      uri: 'images/sun.gif',
      alt: 'Some text',
    }, 
    // Etc.
];

function keyDownBody(e) {
  var keyCode = e.keyCode;

  var index = keyCode - 65;
  if (typeof images[index] !== 'undefined')
  {
    var image = images[index];
    loadImage(image.uri, image.alt);
  }
}

Answer 2

var keys_to_div = [];
keys_to_div[65] = "1"; // A key
keys_to_div[66] = "2"; // B key

window.onkeydown = function(e) {
    if (keys_to_div[e.keyCode])
	document.getElementById(keys_to_div[e.keyCode]).style.display = "block";
}

window.onkeyup = function(e) {
    if (keys_to_div[e.keyCode])
	document.getElementById(keys_to_div[e.keyCode]).style.display = "none";
}

img {
  width: 50px;
  height: 50px;
  display: none;
}

<img src="http://images4.fanpop.com/image/photos/22100000/The-letter-A-the-alphabet-22186936-2560-2560.jpg" id="1">
<img src="http://www.drodd.com/images15/letter-b23.gif" id="2">

Answer 3

您只需添加更多条件

function keyDownBody(e) {
    var keyCode = e.keyCode;
    if(keyCode==83) {
      myFunction("images/giphy1.gif");
    }

    if(keyCode==85) {
      myFunction("images/giphy2.gif");
    }

    if(keyCode==87) {
      myFunction("images/giphy3.gif");
    }
  }

function myFunction(imageName) {
  var x = document.createElement("IMG");
  x.setAttribute("src", imageName)
  x.setAttribute("width", "800");
  x.setAttribute("height", "400");
  x.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(x);
}

Answer 4

对所有键（例如

）使用相同的keydown EventListener

document.addEventListener("keydown", keyDownBody, false);

  function keyDownBody(e) {
    var keyCode = e.keyCode;
    if(keyCode==65) {
      myFunction("images/giphy1.gif");
    }
    else if(keyCode==83) {
      myFunction("images/sun.gif");
    }
  }

function myFunction(t) {
var x = document.createElement("IMG");
x.setAttribute("src", t)
x.setAttribute("width", "800");
x.setAttribute("height", "400");
x.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(x);
}