代码之家  ›  专栏  ›  技术社区  ›  Baudet

当按下某个键时,如何更改背景?

  •  -1
  • Baudet  · 技术社区  · 7 年前

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

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

    2 回复  |  直到 7 年前
        1
  •  1
  •   Gorka Hernandez    7 年前

    您需要绑定 键盘按下 事件,该函数将根据按下的 键代码 :

    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
  •  0
  •   Harsh Patel Sam    7 年前

    当你这样做的时候 e.keyCode == someValue 诸如此类,您可以更改图像源,然后:

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

    数字的ASCII值为48到57。可以为所有数字编写类似的if条件