【原】鍵盤測試2.0版

来源:https://www.cnblogs.com/mxlong/archive/2022/09/02/16650113.html
-Advertisement-
Play Games

之前用跨平臺開發工具做了一個應用，平臺可以同時生成安卓版和蘋果版，想著也把這應用上架到App Store試試，於是找同學借了個蘋果開發者賬號，但沒那麼簡單，還要用到Mac電腦的鑰匙串申請發佈證書和上傳ipa，可沒有Mac，同學的大老遠的也不方便拿過來用，然後搗鼓了個虛擬機，卡的我懷疑人生，後面找到了 ...


<!-- 　   之前寫了個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);

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Apache DolphinScheduler PMC：開源不一定也要九死一生
    點亮 ⭐️ Star · 照亮開源之路 GitHub:https://github.com/apache/dolphinscheduler ​ 參與開源已經快3年了，這次在Meetup上沒有分享純技術的話題，其初衷是想帶這大家從一個開源社區維護者的視角來看開源，希望大家能從中獲取到一些感悟，當然這次 ...
  • 線上數據遷移，數字化時代的必修課 —— 京東雲數據遷移實踐
    打破數據邊界，是數字化時代常掛在嘴邊的一句話，數據的價值是在流動中體現的，數據應用也是如此。以往為了滿足開發、測試、數據保護容災和數據分析的需要，我們不斷對數據進行複製、備份、遷移，因此數據遷移非常重要。 混合多雲時代，用戶數據遷移需求與場景激增 今天我們來重點聊聊混合雲時代中數據遷移，先來看看常見 ...
  • HBuilder包裝iOS APP上App Store的詳細過程
    以前看過很多教程，然後。ITUNE管理APP功能被刪除，IPA安裝失敗。Appuploader已有1個月的期限等問題。 請參見此教程重新安裝。因此，放出。 很多新生開發，不知道如何包裝。ios APP安裝在自己的手機測試，ios不像安卓包裝好後可以直接安裝到手機上，蘋果APP如果需要安裝在非逃避的蘋 ...
  • 2022年ios證書最新申請流程
    ​ 最近的15年，手機行業無論怎麼變，ios系統依然還是占據著行業的榜首位置，而打包一個蘋果的app，門檻則比較高。 主要的原因在於蘋果app的開發，打包時需要p12格式的證書文件和描述文件profile文件（在hbuilder和apicloud這些h5打包平臺，ios證書又叫私鑰證書。），而這些文 ...
  • 簡單理解 JavaScript 的詞法作用域
    前言 關於作用域的有關知識點有全局作用域、局部作用域、函數作用域、塊級作用域、詞法作用域、作用域鏈。 作用域 作用域就像是一個教室，上課時教室裡面的人互相可見，A 教室里的人不可以看見 B 教室里的人。作用域決定了代碼生效的區域以及資源（變數、函數）可見的區域。 function fun() { l ...
  • JavaScript學習
    一、什麼是JavaScript JavaScript世界上最流行的腳本語言 ==一個合格的後端人員，必須精通JavaScript== 二、快速入門 2.1、引入JavaScript 內部引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
  • ES6 關鍵字 let 和 ES5 及以前關鍵字 var 的區別
    var 關鍵字 在 ES5 及以前，通過var在塊級作用域中聲明的變數，外邊也可以訪問。塊級作用域就是一對{}的作用域；塊級作用域可以是控制語句的作用域，也就是非函數的作用域。 function f() { { var x = 10; } console.log(x); // => 10 } 在 f ...
  • 【微信小程式】知識點：頁面事件
    1 下拉刷新 1.1 概念 手指在屏幕上下拉滑動操作，重新載入頁面數據的行為 1.2 啟動下拉刷新的方式 1.2.1 實現局部下拉刷新 1.3 配置下拉刷新視窗的樣式 在全局或頁面的 .json 配置文件中，通過 backgroundColor 和 backgroundTextStyle 來配置下拉 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類