day11-Event Keycodes（事件键码）

格式化小拓

已于 2023-07-16 20:53:04 修改

阅读量28

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

于 2023-07-07 19:56:51 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131603648

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day11-Event Keycodes（事件键码）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event KeyCodes</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 显示 -->
    <div id="insert">
        <!-- 显示key -->
        <div class="key">
            Press any key to get the keyCode-按任意键获取keyCode
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
/* 导入字体 */

:root {
    /* 定义变量 */
    --color1: rgb(89, 89, 238);
    --color2: skyblue;
    --direction: right;
}

* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(to var(--direction),
            var(--color1),
            var(--color2));
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 高度为视口大小 */
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 显示key */
.key {
    border: 1px solid #999;
    background-image: linear-gradient(to var(--direction),
            var(--color2),
            var(--color1));
    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;
    margin: 10px;
    min-width: 150px;
    position: relative;
}

/* 通过js生成的small */
.key small {
    position: absolute;
    top: -24px;
    left: 0;
    text-align: center;
    width: 100%;
    color: #0b0505;
    font-size: 14px;
}

script.js

// 重点是 css变量 background-image: linear-gradient 定位 的应用

// 1.获取元素节点
const insert = document.getElementById('insert');//显示节点
// 2.键盘按下事件
window.addEventListener('keydown', (event) => {
    // console.log(event.key);
    // console.log(event.keyCode);
    // console.log(event.code);
    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>
  `
})

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
day11-Event Keycodes（事件键码）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday11-Event Keycodes（事件键码）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
复制链接

扫一扫