模拟键盘效果

模拟键盘
通过js模拟键盘按压效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        .btn{
            width:80px;
            height: 80px;
            background: #aaa;
            border-radius: 10px;
            font-size: 32px;
            color: #fff;
            line-height: 80px;
            text-align: center;
            box-shadow: 0 3px 3px #666;
            cursor: pointer;/* 手型 */
            transition: all .3s;
            display: inline-block;
            margin: 15px 10px;
        }
        .btn:hover{
            box-shadow: 0 0 0 #666;
            color: #f00;
            font-weight: bold;
        }
        .line{
            text-align: center;
        }
    </style>
</head>
<body>
<script>
    /**
     * 键盘按下按键, 页面对应的按钮有被按下的效果
     * */
    var array = [
        [1,2,3,4,5,6,7,8,9,0],
        ['Q','W','E','R','T','Y','U','I','O','P'],
        ['A','S','D','F','G','H','J','K','L'],
        ['Z','X','C','V','B','N','M']
    ];

    // 遍历二维数组
    for (var i = 0; i < array.length; i++) {
        var line = document.createElement('div');// 创建父级div
        line.className = 'line';//添加样式
        for (var j = 0; j < array[i].length; j++) {
            var btn = document.createElement('div');//创建按钮btn
            btn.className = 'btn';//添加样式
            btn.innerHTML = array[i][j]; //设置显示文本
            line.appendChild(btn);//把按钮放入父元素中
        }
        document.body.appendChild(line);//添加到body中, 页面就可以显示了
    }

    /***
     * 思路:
     * 1. 确定按下的是哪个键(每个键有唯一的keycode),获取keycode数组
     * 2. 按键获取按钮的keycode并得到在keycode数组中的位置
     * */

    var keycodeArr = [49, 50, 51, 52, 53, 54, 55, 56, 57, 48, 81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 65, 83, 68, 70, 71, 72, 74, 75, 76, 90, 88, 67, 86, 66, 78, 77];
    var btns = document.getElementsByClassName('btn');
    //console.log(keycodeArr.length, btns.length);
    document.onkeydown = function (e) {
        //console.log(e.keyCode);
        var keycode = e.keyCode;//获取键盘码
        //找位置
        var index = keycodeArr.indexOf(keycode);//获取对应的位置
        //console.log(index);
        //console.log(btns[index]);
        var btn = btns[index];
        btn.style.color = 'red';
        btn.style.boxShadow = '0 0 0 #666';
        btn.style.fontWeight = 'bold';
    }
    document.onkeyup = function (e) {
        var keycode = e.keyCode;//获取键盘码
        var index = keycodeArr.indexOf(keycode);//获取对应的位置
        var btn = btns[index];
        btn.style.color = '#fff';
        btn.style.boxShadow = '0 3px 3px #666';
        btn.style.fontWeight = 'normal';
    }

</script>
</body>
</html>