草庐IT

【原】键盘测试2.0版

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

 

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);

 

2.0原spanstylecolorJavaScript

有关【原】键盘测试2.0版的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  3. ruby - Ruby 的 Hash 在比较键时使用哪种相等性测试？ - 2

    我有一个围绕一些对象的包装类，我想将这些对象用作散列中的键。包装对象和解包装对象应映射到相同的键。一个简单的例子是这样的:classAattr_reader:xdefinitialize(inner)@inner=innerenddefx;@inner.x;enddef==(other)@inner.x==other.xendenda=A.new(o)#oisjustanyobjectthatallowso.xb=A.new(o)h={a=>5}ph[a]#5ph[b]#nil,shouldbe5ph[o]#nil,shouldbe5我试过==、===、eq?并散列所有无济于事。

  4. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  5. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  6. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  7. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  8. ruby - 即使失败也继续进行多主机测试 - 2

    我已经构建了一些serverspec代码来在多个主机上运行一组测试。问题是当任何测试失败时，测试会在当前主机停止。即使测试失败，我也希望它继续在所有主机上运行。Rakefile:namespace:specdotask:all=>hosts.map{|h|'spec:'+h.split('.')[0]}hosts.eachdo|host|begindesc"Runserverspecto#{host}"RSpec::Core::RakeTask.new(host)do|t|ENV['TARGET_HOST']=hostt.pattern="spec/cfengine3/*_spec.r

  9. ruby-on-rails - 如何使辅助方法在 Rails 集成测试中可用？ - 2

    我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel

  10. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

随机推荐