jQuery_按键变色/keyCode/text

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 14:44-->
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>

    <div class="wrap">
        <h1>提示: 通过 按键 改变颜色</h1>
        <div id="bgChange">
            keyCode为：
            <span id="keyCodeSpan"></span>
        </div>
    </div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {

      // 获取 div
      var $div = $('#bgChange');

      // 获取显示按键的 span
      var $showCode = $('#keyCodeSpan');

      // 给 页面 注册一个 键盘 按下事件
      $(document).on('keydown', function (e) {
          // console.log(e.keyCode);
          switch (e.keyCode) {
              case 82:
                  $div.css('backgroundColor', 'red');
                  $showCode.text(82);
                  break;
              case 71:
                  $div.css('backgroundColor', 'green');
                  $showCode.text(71);
                  break;
              case 66:
                  $div.css('backgroundColor', 'blue');
                  $showCode.text(66);
                  break;
              case 80:
                  $div.css('backgroundColor', 'purple');
                  $showCode.text(80);
                  break;
              case 89:
                  $div.css('backgroundColor', 'yellow');
                  $showCode.text(89);
                  break;
              default:
                  $div.css('backgroundColor', 'pink');
                  $showCode.text("查无此键");
                  break;
          }
      });
      //获取显示按键的span
  });
</script>
</body>
</html>