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

在这里插入图片描述

相关阅读:
Zinquin ethyl ester（CAS NO. 181530-09-6），TSQ的类似物
数字集成电路设计（四、Verilog HDL数字逻辑设计方法）（三）
程序员找副业有哪几个方向（纯干货）
891. 子序列宽度之和（每日一难phase3-4）
pyspark==windows单机搭建
[自动化测试]树莓派4B安装pyppeteer
广州咖啡加盟怎么开，我有一个梦想，开一家自己咖啡店
.net中定义get请求的接口实现
0元真的能做游戏代理吗？
Vue_双向数据绑定失效踩坑-使用$set

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