前端js html css 基础巩固6

这样可以当做一个字典 来使用 每次 点击 键盘上的字母或数字 就可以获得 keyCode

这个 在实际应用中还是有可能使到的 所以大家可以练习一下

直接上代码

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

        * {
            box-sizing: border-box;

        }

        body {
            background-color: #383838;
            font-family: 'Muli', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100vh;
            overflow: hidden;
            margin: 0;
        }

        .key {
            border: 1px solid #999999;
            background-color: #2B2B2B;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            display: inline-flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            padding: 20px;
            flex-direction: column;
            margin: 10px;
            min-width: 150px;
            color: white;
            position: relative;
        }

        .key small {
            position: absolute;
            top: -24px;
            left: 0;
            text-align: center;
            width: 100%;
            color: #c4c4c4;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="insert">
        <div class="key">
            Press any key to get the keyCode
        </div>
    </div>

    <script>
        const insert = document.getElementById("insert")
        window.addEventListener("keydown", (event) => {
            insert.innerHTML = `
  <div class="key">
  ${event.key === ' ' ? 'Space' : event.key} 
  <small>event.key</small>
</div>

<div class="key">
  ${event.keyCode}
  <small>event.keyCode</small>
</div>

<div class="key">
  ${event.code}
  <small>event.code</small>
</div>
  `
        })
    </script>

</body>

</html>
相关推荐
10年前端老司机1 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安1 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam2 小时前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~2 小时前
phpstudy .htaccess 文件内容
java·开发语言·前端
WebDesign_Mu3 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH4 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了4 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER4 小时前
Web 开发 30
前端·笔记·后端·学习·web
学编程的小虎4 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
Jonathan Star4 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux