JS迷你键盘
以CSS书写样式，在底部添加了JS脚本作为驱动，实现与键盘交互式响应。JS代码比较精简，适合初学者练习、拓展，CSS较难，每一个按键都是好多个div拼凑的，CSS精通者可以尝试
|支持键盘点击事件，有响应效果
|————–|–|
如果你不曾学习过前端语言，又想将代码保存下来，留待将来学习和参悟，那么请点击 “ 这里 ” ，一遍就能学废。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta charset="GB2312">
<title>奇酷教学键盘</title>
<style>*{margin:0;padding:0;list-style-type:none;}.keyboard {display: grid;grid-template-columns: repeat(30, 1.9vw);grid-template-rows: repeat(5, 4.75vw);grid-gap: 0.95vw;background: #c2ccdb;padding: 1.727272727272727vw;border-radius: 1.266666666666667vw;background: #d8dee8;box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;}.keyboard .key {border-radius: 0.76vw;grid-column: auto/span 2;width: 100%;height: 100%;padding: 0.475vw;font-size: 1.9vw;display: grid;align-items: center;color: #8a94a4;justify-content: center;cursor: pointer;background: #d8dee8;box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);user-select: none;}.keyboard .key:hover,.keyboard .key.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f6f8fa, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;color: #fff;text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;}.keyboard .key.dotted {position: relative;}.keyboard .key.dotted::before {content: '_';font-weight: bold;color: #b5c0d2;position: absolute;top: 70%;left: 50%;transform: translate(-50%, -50%);}.keyboard .key.esc {background: #ed4c67;color: #fbdbe1;}.keyboard .key.esc:hover,.keyboard .key.esc.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f38e9f, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c71432;color: #fff;text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;}.keyboard .key.back {background: #d63031;color: #f7d6d6;}.keyboard .key.back:hover,.keyboard .key.back.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #e57c7d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #991e1f;color: #fff;text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;}.keyboard .key.shift {background: #1e90ff;color: #d2e9ff;}.keyboard .key.shift:hover,.keyboard .key.shift.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #71b9ff, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0065c8;color: #fff;text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;}.keyboard .key.control {background: #be2edd;color: #f2d5f8;}.keyboard .key.control:hover,.keyboard .key.control.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #d57be9, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #891aa1;color: #fff;text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;}.keyboard .key.win {background: #f7b731;color: #fdf1d6;}.keyboard .key.win:hover,.keyboard .key.win.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fad17d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c78908;color: #fff;text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;}.keyboard .key.alt {background: #5352ed;color: #dddcfb;}.keyboard .key.alt:hover,.keyboard .key.alt.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #9291f3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1615ca;color: #fff;text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;}.keyboard .key.fn {background: #26de81;color: #d4f8e6;}.keyboard .key.fn:hover,.keyboard .key.fn.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #76eaaf, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #189e5a;color: #fff;text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;}.keyboard .key.cap {background: #ee5a24;color: #fcded3;position: relative;}.keyboard .key.cap:hover,.keyboard .key.cap.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f49675, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #b23a0e;color: #fff;text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;}.keyboard .key.cap::before {content: '';position: absolute;width: 0.5vw;height: 0.5vw;background: #f6ac91;top: 1vw;right: 1vw;border-radius: 50%;}.keyboard .key.cap.on::before {background: #fbded3;box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);}.keyboard .key.tab {background: #12cbc4;color: #cafaf8;}.keyboard .key.tab:hover,.keyboard .key.tab.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #5aede7, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0d8e89;color: #fff;text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;}.keyboard .key.enter {background: #fdcb6e;color: #fff5e2;}.keyboard .key.enter:hover,.keyboard .key.enter.pressed {transform: perspective(300px) scale(0.97);box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fddea3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #fba403;color: #fff;text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;}.keyboard .key.s2 {font-size: 1.727272727272727vw;grid-column: auto/span 2;}.keyboard .key.s3 {font-size: 1.727272727272727vw;grid-column: auto/span 3;}.keyboard .key.s4 {font-size: 1.727272727272727vw;grid-column: auto/span 4;}.keyboard .key.s5 {font-size: 1.727272727272727vw;grid-column: auto/span 5;}.keyboard .key.s6 {font-size: 1.727272727272727vw;grid-column: auto/span 6;}.keyboard .key.s12 {font-size: 1.727272727272727vw;grid-column: auto/span 12;}.keyboard .key[on-shift] {font-size: 1.461538461538461vw;justify-items: center;}.keyboard .key[on-shift]::before {content: attr(on-shift);align-items: end;}@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");* {box-sizing: border-box;padding: 0;margin: 0;}body {font-family: 'Sen', sans-serif;min-height: 100vh;overflow: hidden;display: grid;place-items: center;background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);}
</style>
</head>
<body><div class="keyboard"><div class="key s2 esc" data-key="💰">💰</div><div class="key" on-shift="!" data-key="1">1</div><div class="key" on-shift="@" data-key="2">2</div><div class="key" on-shift="#" data-key="3">3</div><div class="key" on-shift="$" data-key="4">4</div><div class="key" on-shift="%" data-key="5">5</div><div class="key" on-shift="^" data-key="6">6</div><div class="key" on-shift="&" data-key="7">7</div><div class="key" on-shift="*" data-key="8">8</div><div class="key" on-shift="(" data-key="9">9</div><div class="key" on-shift=")" data-key="0">0</div><div class="key sub" on-shift="_" data-key="-">-</div><div class="key add" on-shift="+" data-key="=">=</div><div class="key s4 back" data-key="😅">😅</div><div class="key s3 tab" data-key="📑">📑</div><div class="key" data-key="Q">Q</div><div class="key" data-key="W">W</div><div class="key" data-key="E">E</div><div class="key" data-key="R">R</div><div class="key" data-key="T">T</div><div class="key" data-key="Y">Y</div><div class="key" data-key="U">U</div><div class="key" data-key="I">I</div><div class="key" data-key="O">O</div><div class="key" data-key="P">P</div><div class="key openbracket" on-shift="{" data-key="[">[</div><div class="key closebracket" on-shift="}" data-key="]">]</div><div class="key s3 pipe" on-shift="|" data-key="\">\</div><div class="key s4 cap" data-key="🔓">🔓</div><div class="key" data-key="A">A</div><div class="key" data-key="S">S</div><div class="key" data-key="D">D</div><div class="key dotted" data-key="F">F</div><div class="key" data-key="G">G</div><div class="key" data-key="H">H</div><div class="key dotted" data-key="J">J</div><div class="key" data-key="K">K</div><div class="key" data-key="L">L</div><div class="key semi" on-shift=":" data-key=";">;</div><div class="key comma" on-shift=""" data-key=",">,</div><div class="key s4 enter" data-key="😤">😤</div><div class="key s5 shift" data-key="💪">💪</div><div class="key" data-key="Z">Z</div><div class="key" data-key="X">X</div><div class="key" data-key="C">C</div><div class="key" data-key="V">V</div><div class="key" data-key="B">B</div><div class="key" data-key="N">N</div><div class="key" data-key="M">M</div><div class="key openangular" on-shift="<" data-key=",">,</div><div class="key closeangular" on-shift=">" data-key=".">.</div><div class="key slash" on-shift="?" data-key="">/</div><div class="key s5 shift up" data-key="🔥">🔥</div><div class="key s3 control" data-key="☕">☕</div><div class="key s3 win" data-key="🤩">🤩</div><div class="key s3 alt" data-key="⭐️">⭐️</div><div class="key s12 space" data-key=""></div><div class="key s3 alt" data-key="⭐️">⭐️</div><div class="key s2 fn left" data-key="🌈">🌈</div><div class="key s2 fn down" data-key="👨💻">👨💻</div><div class="key s2 control right" data-key="🏆">🏆</div>
</div>
</body>
<script type="text/javascript">keyHash = {8: ".back",9: ".tab",13: ".enter",16: ".shift",17: ".control",18: ".alt",20: ".cap",27: ".esc",32: ".space",37: ".left",38: ".up",39: ".right",40: ".down",186: ".semi",187: '.add',189: '.sub',222: ".comma",219: ".openbracket",221: ".closebracket",220: ".pipe",188: ".openangular",190: ".closeangular",191: ".slash",91: '.win'};const cap = document.querySelector('.cap');function checkCaps() {if (event.getModifierState("CapsLock")) {cap.classList.add('on')} else {cap.classList.remove('on')}}const handleKeyDown = (e) => {checkCaps()let target = keyHash[e.keyCode];if (!target) target = `.key[data-key="${String.fromCharCode(e.keyCode)}"]`;const key = document.querySelector(target);key && key.classList.toggle("pressed");};function unPress(e) {if (e.propertyName === "transform") this.classList.remove("pressed");}window.addEventListener("keydown", handleKeyDown);const keys = document.querySelectorAll(".key");keys.forEach((k) => k.addEventListener("transitionend", unPress));
</script>
</html>
本文部分代码引用自“ 站长之家 ”，
喜欢请支持原创。
如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！
推荐阅读：
情人节送给粉丝的礼物
诺基亚贪吃蛇
游动的花花肠子
JS激流勇进
支付宝扫一扫
微信扫一扫
