前端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>
相关推荐
轻语呢喃2 分钟前
前端路由:从传统页面跳转到单页应用(SPA)
前端·react.js·html
foxhuli2298 分钟前
echarts 绘制3D中国地图
前端
KeyNG_Jykxg9 分钟前
🥳Elx开源升级:XMarkdown 组件加入、Storybook 预览体验升级
前端·vue.js·人工智能
不吃香菜的猪12 分钟前
Vue3的组件通信方式
前端·javascript·vue.js
hard_coding_wang31 分钟前
使用layui的前端框架过程中,无法加载css和js怎么办?
javascript·前端框架·layui
香蕉可乐荷包蛋39 分钟前
vue3中ref和reactive的使用、优化
前端·javascript·vue.js
勤奋的知更鸟1 小时前
JavaScript 性能优化实战:深入性能瓶颈,精炼优化技巧与最佳实践
开发语言·javascript·性能优化
耶啵奶膘1 小时前
css——width: fit-content 宽度、自适应
前端·css
OEC小胖胖1 小时前
前端框架状态管理对比:Redux、MobX、Vuex 等的优劣与选择
前端·前端框架·web
字节架构前端2 小时前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构