JS迷你键盘

时间 2020-10-05 标签 javascript css html 前端 java web api svg 学习 this
JS迷你键盘

以CSS书写样式，在底部添加了JS脚本做为驱动，实现与键盘交互式响应。JS代码比较精简，适合初学者练习、拓展，CSS较难，每个按键都是好多个div拼凑的，CSS精通者能够尝试javascript
支持键盘点击事件，有响应效果
若是你未曾学习过前端语言，又想将代码保存下来，留待未来学习和参悟，那么请点击 “ 这里 ” ，一遍就能学废。css
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<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="&amp;" 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="&quot;" 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="&lt;" data-key=",">,</div>
  <div class="key closeangular" on-shift="&gt;" 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>
本文部分代码引用自“ 站长之家 ”，
喜欢请支持原创。html
若是你以为个人代码还算有趣，在你的学习中能有所帮助，请查看个人置顶文章，我由衷感谢！
前端
推荐阅读：java
情人节送给粉丝的礼物web
诺基亚贪吃蛇api
游动的花花肠子svg
英雄普罗米修斯学习