前端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>
相关推荐
因吹斯汀29 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡34 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧34 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼35 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒1 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
whysqwhw2 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端