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

【问题标题】：How do i change the background when a certain key is pressed?按下某个键时如何更改背景？
【发布时间】：2018-01-18 09:29:26
【问题描述】：

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

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

【问题讨论】：

你试过什么？该网站是针对特定问题/答案的，而不是用于编写代码的服务。
阅读How to create a Minimal, Complete, and Verifiable example

标签： javascript html background keypress keyboard-events

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

当你做e.keyCode == someValue之类的时候，你可以改变图像源然后：

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

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

【讨论】：