按下某个键时如何更改背景？

Question

当有人在 html 输入中键入 1-8 而不按 enter 键时，如何将 html 背景更改为不同颜色？

例如按 1 使 html 背景变为绿色，按 2 使其变为红色等

Answer 1

当你做e.keyCode == someValue之类的时候，你可以更改图片来源：

// Number
if (event.keyCode == 49) {
      $("#id").css("background-color", "green");
}

一个数字的ASCII值是从48到57。你可以为所有数字写类似的if条件

Answer 2

您需要将 keydown 事件绑定到一个函数，该函数将根据按下的 keyCode[= 更改背景颜色样式 属性 22=]:

window.addEventListener('keydown', event => {
  switch (event.keyCode) {
      case 49: // 1
        setBackgroundColor('red');
        break;
      case 50: // 2
        setBackgroundColor('green');
        break;
      case 51: // 3
        setBackgroundColor('blue');
        break;
      case 52: // 4
        setBackgroundColor('yellow');
        break;
      case 53: // 5
        setBackgroundColor('black');
        break;
      case 54: // 6
        setBackgroundColor('white');
        break;
      case 55: // 7
        setBackgroundColor('purple');
        break;
      case 56: // 8
        setBackgroundColor('#333');
  }
});

function setBackgroundColor(color) {
    document
      .querySelector('body')
      .style
      .backgroundColor = color;
}

这是一个工作示例： https://codepen.io/anon/pen/zpMEyQ

关键代码参考table： https://css-tricks.com/snippets/javascript/javascript-keycodes/