【原】键盘测试2.0版

<!--

　   之前写了个1.0版本，按键布局不美观，这又在原来的基础上修改了下，写了个2.0版本。

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

-->

 

效果图：

 

CSS代码：

        *{
            margin: 0;
            border: 0;
        }

        h1,p{
            text-align: center;
        }
        
        div{
            margin: 40px auto;
            width: 1000px;
            height: 490px;
        }

        a{
            display: block;
            height: 50px;
            width: 50px;
            border: 1px solid red;
            float: left;
            position: relative;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;

        }

        #esc{
            font-size: small;
        }

        #pause{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
        }

        #tab{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 70px;
            border: 1px solid red;
            text-align: center;
        }

        #cap{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 85px;
            border: 1px solid red;
            text-align: center;
        }

        #enter{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 85px;
            border: 1px solid red;
            text-align: center;
        }

        #shift{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 100px;
            border: 1px solid red;
            text-align: center;
        }

        #space{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 370px;
            border: 1px solid red;
            text-align: center;
        }

        #insert{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
        }

        #delete{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
        }

        #backspace{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 100px;
            border: 1px solid red;
            text-align: center;
            font-size: small;
        }

        #ctrl{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 60px;
            border: 1px solid red;
            text-align: center;
            font-size: xx-small;
        }

        #meta{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
        }
    
        #up{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
            word-break: break-all;
        }

        #left{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
            word-break: break-all;
        }
        
        #down{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
            word-break: break-all;
        }

        #right{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            border: 1px solid red;
            text-align: center;
            font-size: small;
            word-break: break-all;
        }

        .empty{
            float: left;
            border: 1px solid white;
        }

 

HTML代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘按键测试2.0版</title>
</head>
<body>

        <h1>键盘按键测试</h1>
        <p>注：测试前请先按F11，先让浏览器处于全屏状态下，否则当按下TAB键时，会让当前页面失去焦点，影响后面使用。</p>
        <p>如果在非全屏下，失去焦点时，在任意红框内点下鼠标即可重新获得焦点。</p>
    <div id="all">
        <!--div使用键盘监听事件时，要设置tabindex=1才可以被监听
        -->
        <div id="key" tabindex="1">
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
        </div>
    </div>
</body>
</html>

 

JavaScript代码：

        /*
        名称：键盘测试2.0版
        功能:测试键盘上按键被按下，同时页面上显示的对应键产生变化
        日期：2022年8月30日22:07
        作者：猫降龙
        */

        //获取ID
        let tagKey=document.getElementById("key");
        //获取a元素
        //let tagA=tagKey.getElementsByTagName("a");
        tagKey.focus();
        //event是对像类型，写成e也是同样效果
        tagKey.onkeydown=function(event){
        //注：打印event会发现里面有一个key属性
        //打印event.key是监控键盘按下的是什么键
        //console.log(event.key);
                
        //key是event对像中的属性
        //let {key}=event;
        //console.log(key);
        //将按下的键名(event中的key属性)赋值给strKey
        let strKey=event.key;
        //console.log("你已按下该键"+strKey);
        //console.log(strKey.toUpperCase());
        //获取所有a标签，不包含内容
        let tagKey=document.querySelectorAll("a");
        //获取的所有a标签，用forEach来循环其中的内容
        tagKey.forEach(a=>{

            //如果按下的英文键名转为大写等于a标签的内容，则将其改为红色背景
            if(a.innerHTML===strKey.toUpperCase()){
                //a.setAttribute("style","background-color:red");
                a.style.backgroundColor="red";
                //a.style.color="red";
            }
        });
        }

        //每隔500毫秒获取一次焦点
        setInterval(() => {
            tagKey.focus();
        }, 500);