JavaScript學習-鍵盤碼
阿新 • • 發佈：2018-10-31
思路如下：1.建立函式onkeyboradEvent(event),根據switch針對不同按鍵代表不同的數字來執行；
2.建立keydown事件監聽器針對每一次鍵盤按下事件進行分析。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>keyboard</title> <style> #keyboard{ width:760px; height:200px; border:1px solid; } .key{ width:50px; height:50px; border:1px solid; position:absolute; font-size:16px; text-align:center; } </style> <script> window.onload=function(){ function change(){ for(var i=0;i<30;i++){ document.getElementsByClassName("key")[i].style.backgroundColor="#ffffff"; } } function onKeyboardEvent (event){ switch(event.keyCode){ //q case 81: document.getElementsByClassName("key")[0].style.backgroundColor="#123456"; break; //w case 87: document.getElementsByClassName("key")[1].style.backgroundColor="#123456"; break; //e case 69: document.getElementsByClassName("key")[2].style.backgroundColor="#123456"; break; //r case 82: document.getElementsByClassName("key")[3].style.backgroundColor="#123456"; break; //t case 84: document.getElementsByClassName("key")[4].style.backgroundColor="#123456"; break; //y case 89: document.getElementsByClassName("key")[5].style.backgroundColor="#123456"; break; //u case 85: document.getElementsByClassName("key")[6].style.backgroundColor="#123456"; break; //i case 73: document.getElementsByClassName("key")[7].style.backgroundColor="#123456"; break; //o case 79: document.getElementsByClassName("key")[8].style.backgroundColor="#123456"; break; //p case 80: document.getElementsByClassName("key")[9].style.backgroundColor="#123456"; break; //a case 65: document.getElementsByClassName("key")[10].style.backgroundColor="#123456"; break; //s case 83: document.getElementsByClassName("key")[11].style.backgroundColor="#123456"; break; //d case 68: document.getElementsByClassName("key")[12].style.backgroundColor="#123456"; break; //f case 70: document.getElementsByClassName("key")[13].style.backgroundColor="#123456"; break; //g case 71: document.getElementsByClassName("key")[14].style.backgroundColor="#123456"; break; //h case 72: document.getElementsByClassName("key")[15].style.backgroundColor="#123456"; break; //j case 74: document.getElementsByClassName("key")[16].style.backgroundColor="#123456"; break; //k case 75: document.getElementsByClassName("key")[17].style.backgroundColor="#123456"; break; //l case 76: document.getElementsByClassName("key")[18].style.backgroundColor="#123456"; break; //up case 38: document.getElementsByClassName("key")[19].style.backgroundColor="#123456"; break; //z case 90: document.getElementsByClassName("key")[20].style.backgroundColor="#123456"; break; //x case 88: document.getElementsByClassName("key")[21].style.backgroundColor="#123456"; break; //c case 67: document.getElementsByClassName("key")[22].style.backgroundColor="#123456"; break; //v case 86: document.getElementsByClassName("key")[23].style.backgroundColor="#123456"; break; //b case 66: document.getElementsByClassName("key")[24].style.backgroundColor="#123456"; break; //n case 78: document.getElementsByClassName("key")[25].style.backgroundColor="#123456"; break; //m case 77: document.getElementsByClassName("key")[26].style.backgroundColor="#123456"; break; //left case 37: document.getElementsByClassName("key")[27].style.backgroundColor="#123456"; break; //down case 40: document.getElementsByClassName("key")[28].style.backgroundColor="#123456"; break; //right case 39: document.getElementsByClassName("key")[29].style.backgroundColor="#123456"; break; default: console.log(event.keyCode); } } window.addEventListener('keydown',onKeyboardEvent,false); window.addEventListener('keyup',change,false); }; </script> </head> <body> <div id="keyboard"> <div class="key" style="margin-left:10px;margin-top:10px;">Q</div> <div class="key" style="margin-left:70px;margin-top:10px;">W</div> <div class="key" style="margin-left:130px;margin-top:10px;">E</div> <div class="key" style="margin-left:190px;margin-top:10px;">R</div> <div class="key" style="margin-left:250px;margin-top:10px;">T</div> <div class="key" style="margin-left:310px;margin-top:10px;">Y</div> <div class="key" style="margin-left:370px;margin-top:10px;">U</div> <div class="key" style="margin-left:430px;margin-top:10px;">I</div> <div class="key" style="margin-left:490px;margin-top:10px;">O</div> <div class="key" style="margin-left:550px;margin-top:10px;">P</div> <div class="key" style="margin-left:30px;margin-top:75px;">A</div> <div class="key" style="margin-left:90px;margin-top:75px;">S</div> <div class="key" style="margin-left:150px;margin-top:75px;">D</div> <div class="key" style="margin-left:210px;margin-top:75px;">F</div> <div class="key" style="margin-left:270px;margin-top:75px;">G</div> <div class="key" style="margin-left:330px;margin-top:75px;">H</div> <div class="key" style="margin-left:390px;margin-top:75px;">J</div> <div class="key" style="margin-left:450px;margin-top:75px;">K</div> <div class="key" style="margin-left:510px;margin-top:75px;">L</div> <div class="key" style="margin-left:620px;margin-top:75px;">UP</div> <div class="key" style="margin-left:50px;margin-top:140px;">Z</div> <div class="key" style="margin-left:110px;margin-top:140px;">X</div> <div class="key" style="margin-left:170px;margin-top:140px;">C</div> <div class="key" style="margin-left:230px;margin-top:140px;">V</div> <div class="key" style="margin-left:290px;margin-top:140px;">B</div> <div class="key" style="margin-left:350px;margin-top:140px;">N</div> <div class="key" style="margin-left:410px;margin-top:140px;">M</div> <div class="key" style="margin-left:550px;margin-top:140px;">LEFT</div> <div class="key" style="margin-left:620px;margin-top:140px;">DOWN</div> <div class="key" style="margin-left:690px;margin-top:140px;">RIGHT</div> </div> </body> </html>
程式碼網頁實現如下圖：
按k實現k變色。
