【原】键盘测试2.0版

  • 【原】键盘测试2.0版已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端
摘要

 CSS代码: HTML代码: JavaScript代码: 

<!--
    之前写了个1.0版本,按键布局不美观,这又在原来的基础上修改了下,写了个2.0版本。
       代码思路:这次代码没有用keycode码放在数组中,而是用key属性,获取所按下的键的名称,再通过a标签的innerHTML属性,查找所有内容,如果内容相同,就将所对应的标签背景颜色设置为红色,用key这种方法来完成,优点是JS代码量少,但是不足之处是a标签的内容必须是和key显示的键名完全一样,否则会认为不是按下的键,所以项目中功能键的名称都按key定义的名称来设置的,用keycode就不会有这种情况,而且如果做104键盘(键盘有小键盘区的),用key就不能解决这种种情,必须用keycode来进行判断按下的键是否是小键盘区的,熟优熟劣根据自己喜好来选择吧。代码较烂,见谅,主要是和大家分享,让我们因代码而改变、成长并获得成功!
-->
 
效果图:
【原】键盘测试2.0版

 

CSS代码:

  1         *{   2             margin: 0;   3             border: 0;   4         }   5    6         h1,p{   7             text-align: center;   8         }   9           10         div{  11             margin: 40px auto;  12             width: 1000px;  13             height: 490px;  14         }  15   16         a{  17             display: block;  18             height: 50px;  19             width: 50px;  20             border: 1px solid red;  21             float: left;  22             position: relative;  23             margin-left: 10px;  24             margin-top: 10px;  25             text-align: center;  26   27         }  28   29         #esc{  30             font-size: small;  31         }  32   33         #pause{  34             margin-top: 10px;  35             margin-left: 10px;  36             float: left;  37             border: 1px solid red;  38             text-align: center;  39             font-size: small;  40         }  41   42         #tab{  43             margin-top: 10px;  44             margin-left: 10px;  45             float: left;  46             height: 50px;  47             width: 70px;  48             border: 1px solid red;  49             text-align: center;  50         }  51   52         #cap{  53             margin-top: 10px;  54             margin-left: 10px;  55             float: left;  56             height: 50px;  57             width: 85px;  58             border: 1px solid red;  59             text-align: center;  60         }  61   62         #enter{  63             margin-top: 10px;  64             margin-left: 10px;  65             float: left;  66             height: 50px;  67             width: 85px;  68             border: 1px solid red;  69             text-align: center;  70         }  71   72         #shift{  73             margin-top: 10px;  74             margin-left: 10px;  75             float: left;  76             height: 50px;  77             width: 100px;  78             border: 1px solid red;  79             text-align: center;  80         }  81   82         #space{  83             margin-top: 10px;  84             margin-left: 10px;  85             float: left;  86             height: 50px;  87             width: 370px;  88             border: 1px solid red;  89             text-align: center;  90         }  91   92         #insert{  93             margin-top: 10px;  94             margin-left: 10px;  95             float: left;  96             border: 1px solid red;  97             text-align: center;  98             font-size: small;  99         } 100  101         #delete{ 102             margin-top: 10px; 103             margin-left: 10px; 104             float: left; 105             border: 1px solid red; 106             text-align: center; 107             font-size: small; 108         } 109  110         #backspace{ 111             margin-top: 10px; 112             margin-left: 10px; 113             float: left; 114             height: 50px; 115             width: 100px; 116             border: 1px solid red; 117             text-align: center; 118             font-size: small; 119         } 120  121         #ctrl{ 122             margin-top: 10px; 123             margin-left: 10px; 124             float: left; 125             height: 50px; 126             width: 60px; 127             border: 1px solid red; 128             text-align: center; 129             font-size: xx-small; 130         } 131  132         #meta{ 133             margin-top: 10px; 134             margin-left: 10px; 135             float: left; 136             border: 1px solid red; 137             text-align: center; 138             font-size: small; 139         } 140      141         #up{ 142             margin-top: 10px; 143             margin-left: 10px; 144             float: left; 145             border: 1px solid red; 146             text-align: center; 147             font-size: small; 148             word-break: break-all; 149         } 150  151         #left{ 152             margin-top: 10px; 153             margin-left: 10px; 154             float: left; 155             border: 1px solid red; 156             text-align: center; 157             font-size: small; 158             word-break: break-all; 159         } 160          161         #down{ 162             margin-top: 10px; 163             margin-left: 10px; 164             float: left; 165             border: 1px solid red; 166             text-align: center; 167             font-size: small; 168             word-break: break-all; 169         } 170  171         #right{ 172             margin-top: 10px; 173             margin-left: 10px; 174             float: left; 175             border: 1px solid red; 176             text-align: center; 177             font-size: small; 178             word-break: break-all; 179         } 180  181         .empty{ 182             float: left; 183             border: 1px solid white; 184         }

 

HTML代码:

 1 <!DOCTYPE html>  2 <html lang="zh">  3 <head>  4     <meta charset="UTF-8">  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">  7     <title>键盘按键测试2.0版</title>  8 </head>  9 <body> 10  11         <h1>键盘按键测试</h1> 12         <p>注:测试前请先按F11,先让浏览器处于全屏状态下,否则当按下TAB键时,会让当前页面失去焦点,影响后面使用。</p> 13         <p>如果在非全屏下,失去焦点时,在任意红框内点下鼠标即可重新获得焦点。</p> 14     <div id="all"> 15         <!--div使用键盘监听事件时,要设置tabindex=1才可以被监听 16         --> 17         <div id="key" tabindex="1"> 18             <a id="esc">ESCAPE</a><a>F1</a><a>F2</a><a>F3</a><a>F4</a><a>F5</a><a>F6</a><a>F7</a><a>F8</a><a>F9</a><a>F10</a><a>F11</a><a>F12</a><a id="pause">PAUSE</a><a id="insert">INSERT</a><a id="delete">DELETE</a> 19             <a>`</a><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a><a>-</a><a>=</a><a id="backspace">BACKSPACE</a><a class="empty"></a> 20             <a id="tab">TAB</a><a>Q</a><a>W</a><a>E</a><a>R</a><a>T</a><a>Y</a><a>U</a><a>I</a><a>O</a><a>P</a><a>[</a><a>]</a><a class="empty"></a><a class="empty"></a> 21             <a id="cap">CAPSLOCK</a><a>A</a><a>S</a><a>D</a><a>F</a><a>G</a><a>H</a><a>J</a><a>K</a><a>L</a><a>;</a><a>'</a><a></a><a id="enter">ENTER</a> 22             <a id="shift">SHIFT</a><a>Z</a><a>X</a><a>C</a><a>V</a><a>B</a><a>N</a><a>M</a><a>,</a><a>.</a><a>/</a><a id="shift">SHIFT</a><a id="up">ARROWUP</a><a class="empty"></a> 23             <a id="ctrl">CONTROL</a><a id="meta">META</a><a>ALT</a><a id="space"> </a><a>META</a><a>ALT</a><a id="ctrl">CONTROL</a><a id="left">ARROWLEFT</a><a id="down">ARROWDOWN</a><a id="right">ARROWRIGHT</a> 24         </div> 25     </div> 26 </body> 27 </html>

 

JavaScript代码:

 1         /*  2         名称:键盘测试2.0版  3         功能:测试键盘上按键被按下,同时页面上显示的对应键产生变化  4         日期:2022年8月30日22:07  5         作者:猫降龙  6         */  7   8         //获取ID  9         let tagKey=document.getElementById("key"); 10         //获取a元素 11         //let tagA=tagKey.getElementsByTagName("a"); 12         tagKey.focus(); 13         //event是对像类型,写成e也是同样效果 14         tagKey.onkeydown=function(event){ 15         //注:打印event会发现里面有一个key属性 16         //打印event.key是监控键盘按下的是什么键 17         //console.log(event.key); 18                  19         //key是event对像中的属性 20         //let {key}=event; 21         //console.log(key); 22         //将按下的键名(event中的key属性)赋值给strKey 23         let strKey=event.key; 24         //console.log("你已按下该键"+strKey); 25         //console.log(strKey.toUpperCase()); 26         //获取所有a标签,不包含内容 27         let tagKey=document.querySelectorAll("a"); 28         //获取的所有a标签,用forEach来循环其中的内容 29         tagKey.forEach(a=>{ 30  31             //如果按下的英文键名转为大写等于a标签的内容,则将其改为红色背景 32             if(a.innerHTML===strKey.toUpperCase()){ 33                 //a.setAttribute("style","background-color:red"); 34                 a.style.backgroundColor="red"; 35                 //a.style.color="red"; 36             } 37         }); 38         } 39  40         //每隔500毫秒获取一次焦点 41         setInterval(() => { 42             tagKey.focus(); 43         }, 500);