前端，模拟键盘的实现，网页中一个花里胡哨的键盘（vue2)与(html+css+js)

已于 2024-05-16 17:55:27 修改
阅读量451 收藏 10
点赞数 4
文章标签： 前端 vue html css javascript
于 2024-05-15 15:47:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62438322/article/details/138910651
版权

前语：

偶然注意到主页这个小键盘挺好看就想仿一个来着，但是右键检查看不明白，就去网上搜教程了，找到了这个：

前端 - 纯CSS实现 | 食物系虚拟流光键盘 - 个人文章 - SegmentFault 思否

先给大家看看我的最终效果：

这个居于页面中间是一个大键盘，然后稍微修改，做了一个居于页面右下角的小键盘：

vue大键盘代码：

<template>
    <div class="haha" @keydown="handleKeyDown" @keyup="handleKeyUp">
        <div class="keyboard">
            <div class="key color1" title="吃披萨">🍕</div>
            <div class="key">
                <span>!</span>
                <span>1</span>
            </div>
            <div class="key">
                <span>@</span>
                <span>2</span>
            </div>
            <div class="key">
                <span>#</span>
                <span>3</span>
            </div>
            <div class="key">
                <span>$</span>
                <span>4</span>
            </div>
            <div class="key">
                <span>%</span>
                <span>5</span>
            </div>
            <div class="key">
                <span>^</span>
                <span>6</span>
            </div>
            <div class="key">
                <span>&amp;</span>
                <span>7</span>
            </div>
            <div class="key">
                <span>*</span>
                <span>8</span>
            </div>
            <div class="key">
                <span>(</span>
                <span>9</span>
            </div>
            <div class="key">
                <span>)</span>
                <span>0</span>
            </div>
            <div class="key">
                <span>_</span>
                <span>-</span>
            </div>
            <div class="key">
                <span>+</span>
                <span>=</span>
            </div>
            <div class="key kl4 color1" title="啃鸡腿">🍗</div>
            <div class="key kl3 color3" title="喝肉汤">🥘</div>
            <div class="key">Q</div>
            <div class="key">W</div>
            <div class="key">E</div>
            <div class="key">R</div>
            <div class="key">T</div>
            <div class="key">Y</div>
            <div class="key">U</div>
            <div class="key">I</div>
            <div class="key">O</div>
            <div class="key">P</div>
            <div class="key">
                <span>{</span>
                <span>[</span>
            </div>
            <div class="key">
                <span>}</span>
                <span>]</span>
            </div>
            <div class="key kl3">
                <span>|</span>
                <span>\</span>
            </div>
            <div class="key kl4 color4" title="兔子爱吃胡萝卜">🥕</div>
            <div class="key">A</div>
            <div class="key">S</div>
            <div class="key">D</div>
            <div class="key">F</div>
            <div class="key">G</div>
            <div class="key">H</div>
            <div class="key">J</div>
            <div class="key">K</div>
            <div class="key">L</div>
            <div class="key">
                <span>:</span>
                <span>;</span>
            </div>
            <div class="key">
                <span>"</span>
                <span>'</span>
            </div>
            <div class="key kl4 color5" title="剥个虾给你吃">🦐</div>
            <div class="key kl5 color6" data-location=1 title="糖炒板栗">🌰</div>
            <div class="key">Z</div>
            <div class="key">X</div>
            <div class="key">C</div>
            <div class="key">V</div>
            <div class="key">B</div>
            <div class="key">N</div>
            <div class="key">M</div>
            <div class="key">
                <span>&lt;</span>
                <span>,</span>
            </div>
            <div class="key">
                <span>&gt;</span>
                <span>.</span>
            </div>
            <div class="key">
                <span>?</span>
                <span>/</span>
            </div>
            <div class="key kl5 color6" data-location=2 title="小鸡炖蘑菇">🍄</div>
            <div class="key kl3 color7" data-location=1 title="嚯口啤酒">🍺</div>
            <div class="key kl3 color5" data-location=1 title="爱笑甜甜圈">🍩</div>
            <div class="key kl3 color3" data-location=1 title="来个汉堡">🍔</div>
            <div class="key kl12" title="吃太多了">放屁键💨</div>
            <div class="key kl3 color3" data-location=2 title="酸溜猕猴桃">🥝</div>
            <div class="key color9" data-location=2 title="不吐籽葡萄">🍇</div>
            <div class="key color9" title="甜西瓜">🍉</div>
            <div class="key color7" data-location=2 title="中国面">🍝</div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {

        };
    },
    methods: {
        handleKeyDown(event) {
            // 获取按下的键的内容
            console.log(event.code)
            const keyContent = event.key.toUpperCase();
            // 定义特殊键位和对应的符号的映射关系
            const specialKeys = {
                'Backquote': '🍕',
                'Backspace': '🍗',
                'Tab': '🥘',
                'CapsLock': '🥕',
                'Enter': '🦐',
                'ShiftLeft': '🌰',
                'ShiftRight': '🍄',
                'ControlLeft': '🍺',
                'MetaLeft': '🍩',
                'AltLeft': '🍔',
                'Space': '放屁键💨',
                'AltRight': '🥝',
                'MetaRight': '🍇',
                'ContextMenu': '🍉',
                'ControlRight': '🍝',
            };
            // 获取特殊键对应的 emoji
            const specialKeyEmoji = specialKeys[event.code];
            // console.log(specialKeyEmoji);
            // 获取所有键盘元素
            const keyElements = document.querySelectorAll('.key');

            // 遍历所有键盘元素，找到文本内容与按下的键相匹配的元素
            keyElements.forEach(keyElement => {
                // 获取键盘元素的文本内容
                const keyText = keyElement.innerText.trim().toUpperCase();
                // console.log(keyText);
                // 根据按下的特殊键对应的符号键，添加效果
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.add('hovered');
                    if (event.code === 'Tab') {
                        setTimeout(() => {
                            keyElement.classList.remove('hovered');
                        }, 200);
                    }
                }
                // 如果键盘元素的文本内容与按下的键相匹配.则添加效果
                if (keyText == keyContent) {
                    keyElement.classList.add('hovered');
                }

                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.add('hovered');
                    }
                });
            });
        },

        handleKeyUp(event) {
            // 获取松开的键的内容
            const keyContent = event.key.toUpperCase();

            // 定义特殊键位和对应的符号的映射关系
            const specialKeys = {
                'Backquote': '🍕',
                'Backspace': '🍗',
                'Tab': '🥘',
                'CapsLock': '🥕',
                'Enter': '🦐',
                'ShiftLeft': '🌰',
                'ShiftRight': '🍄',
                'ControlLeft': '🍺',
                'MetaLeft': '🍩',
                'AltLeft': '🍔',
                'Space': '放屁键💨',
                'AltRight': '🥝',
                'MetaRight': '🍇',
                'ContextMenu': '🍉',
                'ControlRight': '🍝',
            };

            // 获取所有键盘元素
            const keyElements = document.querySelectorAll('.key');

            // 获取特殊键对应的 emoji
            const specialKeyEmoji = specialKeys[event.code];

            // 遍历所有键盘元素，找到文本内容与松开的键相匹配的元素
            keyElements.forEach(keyElement => {
                // 获取键盘元素的文本内容
                const keyText = keyElement.innerText.trim().toUpperCase();

                // 根据松开的特殊键对应的符号键，移除效果
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.remove('hovered');
                }

                // 如果键盘元素的文本内容与松开的键相匹配，则移除效果
                if (keyText == keyContent) {
                    keyElement.classList.remove('hovered');
                }

                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.remove('hovered');
                    }
                });
            });
        }

    },
    mounted() {
        document.addEventListener('keydown', this.handleKeyDown);
        document.addEventListener('keyup', this.handleKeyUp);
    },
    beforeDestroy() {
        // 在组件销毁前，移除键盘事件监听器
        document.removeEventListener('keydown', this.handleKeyDown);
        document.removeEventListener('keyup', this.handleKeyUp);
    }
};
</script>

<style scoped>
.haha {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard {
    width: 920px;
    height: 324px;
    /* margin: 100px auto; */
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    /* justify-items: center; */
    align-items: center;
    border-radius: 15px;
    padding: 18px;
    border: 1px solid #000;
    background: black;
    animation: breathe 5s infinite alternate;
}

.key {
    border-radius: 10px;
    grid-column: auto/span 2;
    display: grid;
    place-items: center;
    height: 51px;
    cursor: pointer;
    color: #fff;
    background: black;
    box-shadow: -3px -3px 10px #e7e7e7, 3px 3px 6px #cacaca;
    transition: all .0.8s;
}

.key:hover {
    box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 3px 3px 6px rgba(36, 36, 36, 0.2), inset -3px -3px 10px rgba(255, 255, 255, 0.356);
}

.hovered {
    box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 3px 3px 6px rgba(36, 36, 36, 0.2), inset -3px -3px 10px rgba(255, 255, 255, 0.356);
}

.kl3 {
    grid-column: auto/span 3;
}

.kl4 {
    grid-column: auto/span 4;
}

.kl5 {
    grid-column: auto/span 5;
}

.kl12 {
    grid-column: auto/span 12;
}

.color1 {
    background: #ed4c67;
    color: #fbdbe1;
}

.color2 {
    background: #d63031;
    color: #f7d6d6;
}

.color3 {
    background: #12cbc4;
    color: #cafaf8;
}

.color4 {
    background: #ee5a24;
    color: #fcded3;
}

.color5 {
    background: #fdcb6e;
    color: #fff5e2;
}

.color6 {
    background: #1e90ff;
    color: #d2e9ff;
}

.color7 {
    background: #be2edd;
    color: #f2d5f8;
}

.color8 {
    background: #5352ed;
    color: #dddcfb;
}

.color9 {
    background: #26de81;
    color: #d4f8e6;
}

@keyframes breathe {
    0% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    10% {
        box-shadow: 1px 1px 80px rgba(59, 255, 255, 1);
    }

    20% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    30% {
        box-shadow: 1px 1px 80px rgba(235, 5, 82);
    }

    40% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow: 1px 1px 80px rgba(15, 226, 15);
    }

    60% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    70% {
        box-shadow: 1px 1px 80px rgba(72, 7, 223);
    }

    80% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    100% {
        box-shadow: 1px 1px 80px rgba(184, 233, 9);
    }
}
</style>

vue右下角小键盘代码：

<template>
    <div class="haha" @keydown="handleKeyDown" @keyup="handleKeyUp">
        <div class="keyboard">
            <div class="key color1" title="吃披萨">🍕</div>
            <div class="key">
                <span>!</span>
                <span>1</span>
            </div>
            <div class="key">
                <span>@</span>
                <span>2</span>
            </div>
            <div class="key">
                <span>#</span>
                <span>3</span>
            </div>
            <div class="key">
                <span>$</span>
                <span>4</span>
            </div>
            <div class="key">
                <span>%</span>
                <span>5</span>
            </div>
            <div class="key">
                <span>^</span>
                <span>6</span>
            </div>
            <div class="key">
                <span>&amp;</span>
                <span>7</span>
            </div>
            <div class="key">
                <span>*</span>
                <span>8</span>
            </div>
            <div class="key">
                <span>(</span>
                <span>9</span>
            </div>
            <div class="key">
                <span>)</span>
                <span>0</span>
            </div>
            <div class="key">
                <span>_</span>
                <span>-</span>
            </div>
            <div class="key">
                <span>+</span>
                <span>=</span>
            </div>
            <div class="key kl4 color1" title="啃鸡腿">🍗</div>
            <div class="key kl3 color3" title="喝肉汤">🥘</div>
            <div class="key">Q</div>
            <div class="key">W</div>
            <div class="key">E</div>
            <div class="key">R</div>
            <div class="key">T</div>
            <div class="key">Y</div>
            <div class="key">U</div>
            <div class="key">I</div>
            <div class="key">O</div>
            <div class="key">P</div>
            <div class="key">
                <span>{</span>
                <span>[</span>
            </div>
            <div class="key">
                <span>}</span>
                <span>]</span>
            </div>
            <div class="key kl3">
                <span>|</span>
                <span>\</span>
            </div>
            <div class="key kl4 color4" title="兔子爱吃胡萝卜">🥕</div>
            <div class="key">A</div>
            <div class="key">S</div>
            <div class="key">D</div>
            <div class="key">F</div>
            <div class="key">G</div>
            <div class="key">H</div>
            <div class="key">J</div>
            <div class="key">K</div>
            <div class="key">L</div>
            <div class="key">
                <span>:</span>
                <span>;</span>
            </div>
            <div class="key">
                <span>"</span>
                <span>'</span>
            </div>
            <div class="key kl4 color5" title="剥个虾给你吃">🦐</div>
            <div class="key kl5 color6" data-location=1 title="糖炒板栗">🌰</div>
            <div class="key">Z</div>
            <div class="key">X</div>
            <div class="key">C</div>
            <div class="key">V</div>
            <div class="key">B</div>
            <div class="key">N</div>
            <div class="key">M</div>
            <div class="key">
                <span>&lt;</span>
                <span>,</span>
            </div>
            <div class="key">
                <span>&gt;</span>
                <span>.</span>
            </div>
            <div class="key">
                <span>?</span>
                <span>/</span>
            </div>
            <div class="key kl5 color6" data-location=2 title="小鸡炖蘑菇">🍄</div>
            <div class="key kl3 color7" data-location=1 title="嚯口啤酒">🍺</div>
            <div class="key kl3 color5" data-location=1 title="爱笑甜甜圈">🍩</div>
            <div class="key kl3 color3" data-location=1 title="来个汉堡">🍔</div>
            <div class="key kl12" title="吃太多了">放屁键💨</div>
            <div class="key kl3 color3" data-location=2 title="酸溜猕猴桃">🥝</div>
            <div class="key color9" data-location=2 title="不吐籽葡萄">🍇</div>
            <div class="key color9" title="甜西瓜">🍉</div>
            <div class="key color7" data-location=2 title="中国面">🍝</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        handleKeyDown(event) {
            console.log(event.code);
            const keyContent = event.key.toUpperCase();
            const specialKeys = {
                'Backquote': '🍕',
                'Backspace': '🍗',
                'Tab': '🥘',
                'CapsLock': '🥕',
                'Enter': '🦐',
                'ShiftLeft': '🌰',
                'ShiftRight': '🍄',
                'ControlLeft': '🍺',
                'MetaLeft': '🍩',
                'AltLeft': '🍔',
                'Space': '放屁键💨',
                'AltRight': '🥝',
                'MetaRight': '🍇',
                'ContextMenu': '🍉',
                'ControlRight': '🍝',
            };
            const specialKeyEmoji = specialKeys[event.code];
            const keyElements = document.querySelectorAll('.key');
            keyElements.forEach(keyElement => {
                const keyText = keyElement.innerText.trim().toUpperCase();
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.add('hovered');
                    if (event.code === 'Tab') {
                        setTimeout(() => {
                            keyElement.classList.remove('hovered');
                        }, 200);
                    }
                }
                if (keyText == keyContent) {
                    keyElement.classList.add('hovered');
                }
                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.add('hovered');
                    }
                });
            });
        },
        handleKeyUp(event) {
            const keyContent = event.key.toUpperCase();
            const specialKeys = {
                'Backquote': '🍕',
                'Backspace': '🍗',
                'Tab': '🥘',
                'CapsLock': '🥕',
                'Enter': '🦐',
                'ShiftLeft': '🌰',
                'ShiftRight': '🍄',
                'ControlLeft': '🍺',
                'MetaLeft': '🍩',
                'AltLeft': '🍔',
                'Space': '放屁键💨',
                'AltRight': '🥝',
                'MetaRight': '🍇',
                'ContextMenu': '🍉',
                'ControlRight': '🍝',
            };
            const keyElements = document.querySelectorAll('.key');
            const specialKeyEmoji = specialKeys[event.code];
            keyElements.forEach(keyElement => {
                const keyText = keyElement.innerText.trim().toUpperCase();
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.remove('hovered');
                }
                if (keyText == keyContent) {
                    keyElement.classList.remove('hovered');
                }
                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.remove('hovered');
                    }
                });
            });
        }
    },
    mounted() {
        document.addEventListener('keydown', this.handleKeyDown);
        document.addEventListener('keyup', this.handleKeyUp);
    },
    beforeDestroy() {
        document.removeEventListener('keydown', this.handleKeyDown);
        document.removeEventListener('keyup', this.handleKeyUp);
    }
};
</script>

<style scoped>
.haha {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    height: auto;
}

.keyboard {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    align-items: center;
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #000;
    background: black;
    animation: breathe 5s infinite alternate;
    transform: scale(0.5); /* 缩小键盘尺寸 */
}

.key {
    border-radius: 10px;
    grid-column: auto/span 2;
    display: grid;
    place-items: center;
    font-size: 10px;
    height: 25px; /* 缩小键盘尺寸 */
    cursor: pointer;
    color: #fff;
    background: black;
    box-shadow: -2px -2px 5px #e7e7e7, 2px 2px 3px #cacaca;
    transition: all .0.8s;
}

.key:hover {
    box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 2px 2px 3px rgba(36, 36, 36, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.356);
}

.key span {
    display: block;
    font-size: 10px; /* 调整 span 内字体大小 */
    line-height: 1;
    padding: 0 2px; /* 添加内边距以防止文本重叠 */
}

.hovered {
    box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 2px 2px 3px rgba(36, 36, 36, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.356);
}

.kl3 {
    grid-column: auto/span 3;
}

.kl4 {
    grid-column: auto/span 4;
}

.kl5 {
    grid-column: auto/span 5;
}

.kl12 {
    grid-column: auto/span 12;
}

.color1 {
    background: #ed4c67;
    color: #fbdbe1;
}

.color2 {
    background: #d63031;
    color: #f7d6d6;
}

.color3 {
    background: #12cbc4;
    color: #cafaf8;
}

.color4 {
    background: #ee5a24;
    color: #fcded3;
}

.color5 {
    background: #fdcb6e;
    color: #fff5e2;
}

.color6 {
    background: #1e90ff;
    color: #d2e9ff;
}

.color7 {
    background: #be2edd;
    color: #f2d5f8;
}

.color8 {
    background: #5352ed;
    color: #dddcfb;
}

.color9 {
    background: #26de81;
    color: #d4f8e6;
}

@keyframes breathe {
    0% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    10% {
        box-shadow: 1px 1px 80px rgba(59, 255, 255, 1);
    }
    20% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    30% {
        box-shadow: 1px 1px 80px rgba(235, 5, 82);
    }
    40% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 1px 1px 80px rgba(15, 226, 15);
    }
    60% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    70% {
        box-shadow: 1px 1px 80px rgba(72, 7, 223);
    }
    80% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 1px 1px 80px rgba(184, 233, 9);
    }
}
</style>

html+css+js大键盘代码：

<!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>打字键盘</title>
</head>

<body id="body">
    <script>
        let cw = 1800, ch = 920
        let body = document.getElementById('body')
        body.style.width = `${cw}px`
        body.style.height = `${ch}px`
        // 对body进行缩放
        function windowResize() {
            // 窗口宽高
            let w = window.innerWidth, h = window.innerHeight
            //窗口最小宽高度
            if (w < 950) {
                w = 950;
            }
            if (h < 480) {
                h = 480;
            }
            // 缩放比例
            let r = w / cw < h / ch ? w / cw : h / ch
            body.style.transform = `scale( ${r})`
            // 因为scale是以body的原中心点为基准进行缩放，所以缩放之后需要调整外边距，使其位于窗口的中心位置
            body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'
            body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'
            body.style.marginBottom = (-(h > ch ? h : ch - r * ch)) + 'px'
            body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px'
        }
        windowResize()
        // 监听窗口尺寸变化
        window.addEventListener('resize', windowResize);
    </script>
    <div class="haha" @keydown="handleKeyDown" @keyup="handleKeyUp">
        <div class="keyboard">
            <div class="key color1" title="吃披萨">🍕</div>
            <div class="key">
                <span>!</span>
                <span>1</span>
            </div>
            <div class="key">
                <span>@</span>
                <span>2</span>
            </div>
            <div class="key">
                <span>#</span>
                <span>3</span>
            </div>
            <div class="key">
                <span>$</span>
                <span>4</span>
            </div>
            <div class="key">
                <span>%</span>
                <span>5</span>
            </div>
            <div class="key">
                <span>^</span>
                <span>6</span>
            </div>
            <div class="key">
                <span>&amp;</span>
                <span>7</span>
            </div>
            <div class="key">
                <span>*</span>
                <span>8</span>
            </div>
            <div class="key">
                <span>(</span>
                <span>9</span>
            </div>
            <div class="key">
                <span>)</span>
                <span>0</span>
            </div>
            <div class="key">
                <span>_</span>
                <span>-</span>
            </div>
            <div class="key">
                <span>+</span>
                <span>=</span>
            </div>
            <div class="key kl4 color1" title="啃鸡腿">🍗</div>
            <div class="key kl3 color3" title="喝肉汤">🥘</div>
            <div class="key">Q</div>
            <div class="key">W</div>
            <div class="key">E</div>
            <div class="key">R</div>
            <div class="key">T</div>
            <div class="key">Y</div>
            <div class="key">U</div>
            <div class="key">I</div>
            <div class="key">O</div>
            <div class="key">P</div>
            <div class="key">
                <span>{</span>
                <span>[</span>
            </div>
            <div class="key">
                <span>}</span>
                <span>]</span>
            </div>
            <div class="key kl3">
                <span>|</span>
                <span>\</span>
            </div>
            <div class="key kl4 color4" title="兔子爱吃胡萝卜">🥕</div>
            <div class="key">A</div>
            <div class="key">S</div>
            <div class="key">D</div>
            <div class="key">F</div>
            <div class="key">G</div>
            <div class="key">H</div>
            <div class="key">J</div>
            <div class="key">K</div>
            <div class="key">L</div>
            <div class="key">
                <span>:</span>
                <span>;</span>
            </div>
            <div class="key">
                <span>"</span>
                <span>'</span>
            </div>
            <div class="key kl4 color5" title="剥个虾给你吃">🦐</div>
            <div class="key kl5 color6" data-location=1 title="糖炒板栗">🌰</div>
            <div class="key">Z</div>
            <div class="key">X</div>
            <div class="key">C</div>
            <div class="key">V</div>
            <div class="key">B</div>
            <div class="key">N</div>
            <div class="key">M</div>
            <div class="key">
                <span>&lt;</span>
                <span>,</span>
            </div>
            <div class="key">
                <span>&gt;</span>
                <span>.</span>
            </div>
            <div class="key">
                <span>?</span>
                <span>/</span>
            </div>
            <div class="key kl5 color6" data-location=2 title="小鸡炖蘑菇">🍄</div>
            <div class="key kl3 color7" data-location=1 title="嚯口啤酒">🍺</div>
            <div class="key kl3 color5" data-location=1 title="爱笑甜甜圈">🍩</div>
            <div class="key kl3 color3" data-location=1 title="来个汉堡">🍔</div>
            <div class="key kl12" title="吃太多了">放屁键💨</div>
            <div class="key kl3 color3" data-location=2 title="酸溜猕猴桃">🥝</div>
            <div class="key color9" data-location=2 title="不吐籽葡萄">🍇</div>
            <div class="key color9" title="甜西瓜">🍉</div>
            <div class="key color7" data-location=2 title="中国面">🍝</div>
        </div>
    </div>
    <style>
        #body {
            width: 100%;
            height: 100%;
        }

        * {
            padding: 0;
            margin: 0;
        }
    </style>
</body>
<script>
    window.onload = function () {
        const handleKeyDown = function (event) {
            // 获取按下的键的内容
            const keyContent = event.key.toUpperCase();
            // 定义特殊键位和对应的符号的映射关系
            const specialKeys = {
                'Backquote': '🍕',
                'Backspace': '🍗',
                'Tab': '🥘',
                'CapsLock': '🥕',
                'Enter': '🦐',
                'ShiftLeft': '🌰',
                'ShiftRight': '🍄',
                'ControlLeft': '🍺',
                'MetaLeft': '🍩',
                'AltLeft': '🍔',
                'Space': '放屁键💨',
                'AltRight': '🥝',
                'MetaRight': '🍇',
                'ContextMenu': '🍉',
                'ControlRight': '🍝',
            };
            // 获取特殊键对应的 emoji
            const specialKeyEmoji = specialKeys[event.code];
            // 获取所有键盘元素
            const keyElements = document.querySelectorAll('.key');

            // 遍历所有键盘元素，找到文本内容与按下的键相匹配的元素
            keyElements.forEach(keyElement => {
                // 获取键盘元素的文本内容
                const keyText = keyElement.innerText.trim().toUpperCase();
                // 根据按下的特殊键对应的符号键，添加效果
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.add('hovered');
                    if (event.code === 'Tab') {
                        setTimeout(() => {
                            keyElement.classList.remove('hovered');
                        }, 200);
                    }
                }
                // 如果键盘元素的文本内容与按下的键相匹配.则添加效果
                if (keyText === keyContent || (keyText.length === 1 && keyText === keyContent)) {
                    keyElement.classList.add('hovered');
                }
                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.add('hovered');
                    }
                });
            });
        };

        const handleKeyUp = function (event) {
            // 获取松开的键的内容
            const keyContent = event.key.toUpperCase();
            // 定义特殊键位和对应的符号的映射关系
            const specialKeys = {
                'Backquote': '🍕',
                'Backspace': '🍗',
                'Tab': '🥘',
                'CapsLock': '🥕',
                'Enter': '🦐',
                'ShiftLeft': '🌰',
                'ShiftRight': '🍄',
                'ControlLeft': '🍺',
                'MetaLeft': '🍩',
                'AltLeft': '🍔',
                'Space': '放屁键💨',
                'AltRight': '🥝',
                'MetaRight': '🍇',
                'ContextMenu': '🍉',
                'ControlRight': '🍝',
            };
            // 获取所有键盘元素
            const keyElements = document.querySelectorAll('.key');
            // 获取特殊键对应的 emoji
            const specialKeyEmoji = specialKeys[event.code];

            // 遍历所有键盘元素，找到文本内容与松开的键相匹配的元素
            keyElements.forEach(keyElement => {
                // 获取键盘元素的文本内容
                const keyText = keyElement.innerText.trim().toUpperCase();
                // 根据松开的特殊键对应的符号键，移除效果
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.remove('hovered');
                }
                // 如果键盘元素的文本内容与松开的键相匹配，则移除效果
                if (keyText === keyContent || (keyText.length === 1 && keyText === keyContent)) {
                    keyElement.classList.remove('hovered');
                }
                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.remove('hovered');
                    }
                });
            });
        };

        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('keyup', handleKeyUp);
    };

</script>
<style>
    .haha {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .keyboard {
        width: 920px;
        height: 324px;
        /* margin: 100px auto; */
        display: grid;
        grid-template-columns: repeat(30, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 10px;
        /* justify-items: center; */
        align-items: center;
        border-radius: 15px;
        padding: 18px;
        border: 1px solid #000;
        background: black;
        animation: breathe 5s infinite alternate;
    }

    .key {
        border-radius: 10px;
        grid-column: auto/span 2;
        display: grid;
        place-items: center;
        height: 51px;
        cursor: pointer;
        color: #fff;
        background: black;
        box-shadow: -3px -3px 10px #e7e7e7, 3px 3px 6px #cacaca;
        transition: all .0.8s;
    }

    .key:hover {
        box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 3px 3px 6px rgba(36, 36, 36, 0.2), inset -3px -3px 10px rgba(255, 255, 255, 0.356);
    }

    .hovered {
        box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 3px 3px 6px rgba(36, 36, 36, 0.2), inset -3px -3px 10px rgba(255, 255, 255, 0.356);
    }

    .kl3 {
        grid-column: auto/span 3;
    }

    .kl4 {
        grid-column: auto/span 4;
    }

    .kl5 {
        grid-column: auto/span 5;
    }

    .kl12 {
        grid-column: auto/span 12;
    }

    .color1 {
        background: #ed4c67;
        color: #fbdbe1;
    }

    .color2 {
        background: #d63031;
        color: #f7d6d6;
    }

    .color3 {
        background: #12cbc4;
        color: #cafaf8;
    }

    .color4 {
        background: #ee5a24;
        color: #fcded3;
    }

    .color5 {
        background: #fdcb6e;
        color: #fff5e2;
    }

    .color6 {
        background: #1e90ff;
        color: #d2e9ff;
    }

    .color7 {
        background: #be2edd;
        color: #f2d5f8;
    }

    .color8 {
        background: #5352ed;
        color: #dddcfb;
    }

    .color9 {
        background: #26de81;
        color: #d4f8e6;
    }

    @keyframes breathe {
        0% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        10% {
            box-shadow: 1px 1px 80px rgba(59, 255, 255, 1);
        }

        20% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        30% {
            box-shadow: 1px 1px 80px rgba(235, 5, 82);
        }

        40% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        50% {
            box-shadow: 1px 1px 80px rgba(15, 226, 15);
        }

        60% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        70% {
            box-shadow: 1px 1px 80px rgba(72, 7, 223);
        }

        80% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        100% {
            box-shadow: 1px 1px 80px rgba(184, 233, 9);
        }
    }
</style>

</html>

html+css+js右下角小键盘代码:

<!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>打字键盘</title>
</head>
<body id="body">
    <script>
        let cw = 1800, ch = 920
        let body = document.getElementById('body')
        body.style.width = `${cw}px`
        body.style.height = `${ch}px`
        // 对body进行缩放
        function windowResize() {
            // 窗口宽高
            let w = window.innerWidth, h = window.innerHeight
            //窗口最小宽高度
            if (w < 950) {
                w = 950;
            }
            if (h < 480) {
                h = 480;
            }
            // 缩放比例
            let r = w / cw < h / ch ? w / cw : h / ch
            body.style.transform = `scale( ${r})`
            // 因为scale是以body的原中心点为基准进行缩放，所以缩放之后需要调整外边距，使其位于窗口的中心位置
            body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'
            body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'
            body.style.marginBottom = (-(h > ch ? h : ch - r * ch)) + 'px'
            body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px'
        }
        windowResize()
        // 监听窗口尺寸变化
        window.addEventListener('resize', windowResize);
    </script>
    <div class="haha" @keydown="handleKeyDown" @keyup="handleKeyUp">
        <div class="keyboard">
            <div class="key color1" title="吃披萨">🍕</div>
            <div class="key">
                <span>!</span>
                <span>1</span>
            </div>
            <div class="key">
                <span>@</span>
                <span>2</span>
            </div>
            <div class="key">
                <span>#</span>
                <span>3</span>
            </div>
            <div class="key">
                <span>$</span>
                <span>4</span>
            </div>
            <div class="key">
                <span>%</span>
                <span>5</span>
            </div>
            <div class="key">
                <span>^</span>
                <span>6</span>
            </div>
            <div class="key">
                <span>&amp;</span>
                <span>7</span>
            </div>
            <div class="key">
                <span>*</span>
                <span>8</span>
            </div>
            <div class="key">
                <span>(</span>
                <span>9</span>
            </div>
            <div class="key">
                <span>)</span>
                <span>0</span>
            </div>
            <div class="key">
                <span>_</span>
                <span>-</span>
            </div>
            <div class="key">
                <span>+</span>
                <span>=</span>
            </div>
            <div class="key kl4 color1" title="啃鸡腿">🍗</div>
            <div class="key kl3 color3" title="喝肉汤">🥘</div>
            <div class="key">Q</div>
            <div class="key">W</div>
            <div class="key">E</div>
            <div class="key">R</div>
            <div class="key">T</div>
            <div class="key">Y</div>
            <div class="key">U</div>
            <div class="key">I</div>
            <div class="key">O</div>
            <div class="key">P</div>
            <div class="key">
                <span>{</span>
                <span>[</span>
            </div>
            <div class="key">
                <span>}</span>
                <span>]</span>
            </div>
            <div class="key kl3">
                <span>|</span>
                <span>\</span>
            </div>
            <div class="key kl4 color4" title="兔子爱吃胡萝卜">🥕</div>
            <div class="key">A</div>
            <div class="key">S</div>
            <div class="key">D</div>
            <div class="key">F</div>
            <div class="key">G</div>
            <div class="key">H</div>
            <div class="key">J</div>
            <div class="key">K</div>
            <div class="key">L</div>
            <div class="key">
                <span>:</span>
                <span>;</span>
            </div>
            <div class="key">
                <span>"</span>
                <span>'</span>
            </div>
            <div class="key kl4 color5" title="剥个虾给你吃">🦐</div>
            <div class="key kl5 color6" data-location=1 title="糖炒板栗">🌰</div>
            <div class="key">Z</div>
            <div class="key">X</div>
            <div class="key">C</div>
            <div class="key">V</div>
            <div class="key">B</div>
            <div class="key">N</div>
            <div class="key">M</div>
            <div class="key">
                <span>&lt;</span>
                <span>,</span>
            </div>
            <div class="key">
                <span>&gt;</span>
                <span>.</span>
            </div>
            <div class="key">
                <span>?</span>
                <span>/</span>
            </div>
            <div class="key kl5 color6" data-location=2 title="小鸡炖蘑菇">🍄</div>
            <div class="key kl3 color7" data-location=1 title="嚯口啤酒">🍺</div>
            <div class="key kl3 color5" data-location=1 title="爱笑甜甜圈">🍩</div>
            <div class="key kl3 color3" data-location=1 title="来个汉堡">🍔</div>
            <div class="key kl12" title="吃太多了">放屁键💨</div>
            <div class="key kl3 color3" data-location=2 title="酸溜猕猴桃">🥝</div>
            <div class="key color9" data-location=2 title="不吐籽葡萄">🍇</div>
            <div class="key color9" title="甜西瓜">🍉</div>
            <div class="key color7" data-location=2 title="中国面">🍝</div>
        </div>
    </div>
    <style>
        #body {
            width: 100%;
            height: 100%;
        }

        * {
            padding: 0;
            margin: 0;
        }
    </style>

</body>

<script>
    window.onload = function () {
        const specialKeys = {
            'Backquote': '🍕',
            'Backspace': '🍗',
            'Tab': '🥘',
            'CapsLock': '🥕',
            'Enter': '🦐',
            'ShiftLeft': '🌰',
            'ShiftRight': '🍄',
            'ControlLeft': '🍺',
            'MetaLeft': '🍩',
            'AltLeft': '🍔',
            'Space': '放屁键💨',
            'AltRight': '🥝',
            'MetaRight': '🍇',
            'ContextMenu': '🍉',
            'ControlRight': '🍝',
        };

        const handleKeyDown = function (event) {
            const keyContent = event.key.toUpperCase();
            const specialKeyEmoji = specialKeys[event.code];
            const keyElements = document.querySelectorAll('.key');
            keyElements.forEach(keyElement => {
                const keyText = keyElement.innerText.trim().toUpperCase();
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.add('hovered');
                    if (event.code === 'Tab') {
                        setTimeout(() => {
                            keyElement.classList.remove('hovered');
                        }, 200);
                    }
                }
                if (keyText === keyContent || (keyText.length === 1 && keyText === keyContent)) {
                    keyElement.classList.add('hovered');
                }
                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.add('hovered');
                    }
                });
            });
        };

        const handleKeyUp = function (event) {
            const keyContent = event.key.toUpperCase();
            const keyElements = document.querySelectorAll('.key');
            const specialKeyEmoji = specialKeys[event.code];
            keyElements.forEach(keyElement => {
                const keyText = keyElement.innerText.trim().toUpperCase();
                if (specialKeyEmoji && keyText === specialKeyEmoji) {
                    keyElement.classList.remove('hovered');
                }
                if (keyText === keyContent || (keyText.length === 1 && keyText === keyContent)) {
                    keyElement.classList.remove('hovered');
                }
                const spanElements = keyElement.querySelectorAll('span');
                spanElements.forEach(spanElement => {
                    if (spanElement.innerText === keyContent) {
                        keyElement.classList.remove('hovered');
                    }
                });
            });
        };

        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('keyup', handleKeyUp);
    };
</script>

<style>
    .haha {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
        width: 320px;
        height: auto;
    }

    .keyboard {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(30, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 5px;
        align-items: center;
        border-radius: 15px;
        padding: 10px;
        border: 1px solid #000;
        background: black;
        animation: breathe 5s infinite alternate;
        transform: scale(0.5);
        /* 缩小键盘尺寸 */
    }

    .key {
        border-radius: 10px;
        grid-column: auto/span 2;
        display: grid;
        place-items: center;
        font-size: 10px;
        height: 25px;
        /* 缩小键盘尺寸 */
        cursor: pointer;
        color: #fff;
        background: black;
        box-shadow: -2px -2px 5px #e7e7e7, 2px 2px 3px #cacaca;
        transition: all .0.8s;
    }

    .key:hover {
        box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 2px 2px 3px rgba(36, 36, 36, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.356);
    }

    .key span {
        display: block;
        font-size: 10px;
        /* 调整 span 内字体大小 */
        line-height: 1;
        padding: 0 2px;
        /* 添加内边距以防止文本重叠 */
    }

    .hovered {
        box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 2px 2px 3px rgba(36, 36, 36, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.356);
    }

    .kl3 {
        grid-column: auto/span 3;
    }

    .kl4 {
        grid-column: auto/span 4;
    }

    .kl5 {
        grid-column: auto/span 5;
    }

    .kl12 {
        grid-column: auto/span 12;
    }

    .color1 {
        background: #ed4c67;
        color: #fbdbe1;
    }

    .color2 {
        background: #d63031;
        color: #f7d6d6;
    }

    .color3 {
        background: #12cbc4;
        color: #cafaf8;
    }

    .color4 {
        background: #ee5a24;
        color: #fcded3;
    }

    .color5 {
        background: #fdcb6e;
        color: #fff5e2;
    }

    .color6 {
        background: #1e90ff;
        color: #d2e9ff;
    }

    .color7 {
        background: #be2edd;
        color: #f2d5f8;
    }

    .color8 {
        background: #5352ed;
        color: #dddcfb;
    }

    .color9 {
        background: #26de81;
        color: #d4f8e6;
    }

    @keyframes breathe {
        0% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        10% {
            box-shadow: 1px 1px 80px rgba(59, 255, 255, 1);
        }

        20% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        30% {
            box-shadow: 1px 1px 80px rgba(235, 5, 82);
        }

        40% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        50% {
            box-shadow: 1px 1px 80px rgba(15, 226, 15);
        }

        60% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        70% {
            box-shadow: 1px 1px 80px rgba(72, 7, 223);
        }

        80% {
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }

        100% {
            box-shadow: 1px 1px 80px rgba(184, 233, 9);
        }
    }
</style>

</html>

问题：

vue代码在本地运行没问题，但打包后按键盘可以触发事件，不可以添加特效（按键效果）,我的vue.config.js代码如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true
})

湘裳
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

湘裳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值