<!-- 之前寫了個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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503470.html
標籤：JavaScript
下一篇：【微信小程式】知識點：頁面事件