前端js html css 基础巩固6

一只小阿乐2024-10-20 9:25

这样可以当做一个字典来使用每次点击键盘上的字母或数字就可以获得 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>