<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Key Code App</title>
</head>
<body>
<section>
<div class="container">
<div class="key">
<h1>按下的键</h1>
<h2>G</h2>
</div>
<div class="arrow">➡️</div>
<div class="keyCode">
<h1>对应编码</h1>
<h2>56</h2>
<p>点击复制</p>
</div>
</div>
</section>
<div class="overlay">
<h2>按下键盘任意键开始</h2>
</div>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat";
font-size: 20px;
background-color: aliceblue;
}
section {
min-height: 100vh;
width: 100%;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
width: 90%;
max-width: 1000px;
}
.container div {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 10px;
box-shadow: 1px 1px 20px 0px #0000001c;
}
.container h2 {
font-size: 60px;
margin: 20px 0;
}
.arrow {
box-shadow: none !important;
background-color: transparent !important;
padding: 0 100px !important;
}
.arrow img {
height: 80px;
}
.keyCode {
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
.overlay.hide {
display: none;
}
@media only screen and (max-width: 1000px) {
.container {
flex-direction: column;
}
.arrow {
padding: 30px 0 !important;
transform: rotate(90deg);
}
}
/* ********************* */
/* This Code is for only the floating card in right bottom corner */
/* ********************** */
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.float-text {
display: inline-block;
position: fixed;
right: 10px;
bottom: 10px;
width: fit-content;
background-color: #192227;
color: whitesmoke;
font-family: "Montserrat";
text-transform: capitalize;
font-size: 15px;
padding: 10px 20px;
border-radius: 4px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.226);
cursor: pointer;
border: 1px solid white;
}
.float-card-info {
width: 300px;
position: fixed;
background-color: #263238;
border: 2px solid white;
overflow: hidden;
bottom: 5px;
right: -100%;
padding: 30px;
border-radius: 8px;
transition: 0.5s ease-in-out right;
}
.float-card-info p {
color: white;
font-size: 20px;
font-family: "Montserrat";
text-transform: capitalize;
width: 100%;
font-weight: 500;
text-align: center;
margin-bottom: 20px;
}
.gg-youtube {
--ggs: 1.5;
}
.float-card-info .icons {
width: 120px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-bottom: 20px;
}
.float-card-info .icons a {
display: inline-block;
cursor: pointer;
color: whitesmoke;
}
.float-card-info .icons a:hover {
color: rgb(127, 127, 129);
}
.float-card-info .link {
width: 100%;
display: block;
text-decoration: none;
color: whitesmoke;
font-family: "Montserrat";
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.gg-close-r {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.float-card-info.active {
right: 5px;
bottom: 5px;
}
.float-card-info .hire {
background-color: #181e22;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 18px;
border-radius: 6px;
width: fit-content;
margin: 0 auto;
padding: 10px 20px;
margin-top: 20px;
}
JS
格式化
const displayKey = document.querySelector(".key h2");
const displayKeyCode = document.querySelector(".keyCode h2");
const keyCodeDiv = document.querySelector(".keyCode");
const overlay = document.querySelector(".overlay");
window.addEventListener("keydown", (e) => {
overlay.classList.add("hide");
displayKey.innerHTML = e.key;
displayKeyCode.innerHTML = e.keyCode;
if (e.keyCode === 32) {
displayKey.innerHTML = `'space'`;
}
});
keyCodeDiv.addEventListener("click", (e) => {
const textArea = document.createElement("textarea");
textArea.setAttribute("readonly", "");
textArea.style.position = "absolute";
textArea.value = displayKeyCode.innerText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
keyCodeDiv.querySelector("p").innerText = "Copied";
setTimeout(() => {
keyCodeDiv.querySelector("p").innerText = "Click to Copy";
}, 2000);
});
// *********************
// This Code is for only the floating card in right bottom corner
// **********************
const touchButton = document.querySelector(".float-text");
const card = document.querySelector(".float-card-info");
const close = document.querySelector(".gg-close-r");
function moveCard() {
card.classList.toggle("active");
}