Question

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

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

Answer 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/

Answer 2

执行e.keyCode == someValue之后，您可以更改图像源：

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

数字的ASCII值从48到57.如果所有数字的条件

，您可以写相似的

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

2 个答案: