首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS迷你键盘

JS迷你键盘

作者头像
我不是费圆
发布2020-09-21 16:46:55
2.4K0
发布2020-09-21 16:46:55
举报
文章被收录于专栏:鲸鱼动画鲸鱼动画

JS迷你键盘

  以CSS书写样式,在底部添加了JS脚本作为驱动,实现与键盘交互式响应。JS代码比较精简,适合初学者练习、拓展,CSS较难,每一个按键都是好多个div拼凑的,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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JS迷你键盘
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档