jQuery_按键变色/keyCode/text




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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

在这里插入图片描述

相关阅读:
【摘星星计划】day16-dayxx：react基础
如何使用Git和GitHub进行版本控制
在Centos7.9_2207安装CDH6.3.2
C语言题目 1760: 字符序列模式识别
jQuery实现下拉列表复选框可多选
1、cvpr2024
C++day3
Sqoop使用的一些问题
代码生成商业化一些思考
TRC心血管研究之艾美捷TRC心肌梗塞研究领域

原文地址：https://blog.csdn.net/beyondx/article/details/126122732