2021-08-13

最新推荐文章于 2021-08-19 12:45:19 发布

Sarnwan

最新推荐文章于 2021-08-19 12:45:19 发布

阅读量53

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/119699592

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

事件对象之键盘

事件对象e: charcode keycode
charcode用于onkeypress
keycode用于onkeyup/down
onkeypress用于字符
onkeyup/down用于按键
37-40左顺 0-9:48-- a-z:97-- A-Z:65–

小例子：按方向键控制盒子移动

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象之键盘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <!-- 按方向键控制盒子移动 -->
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById('box')
    var l = 100
    var t = 100
    // document对整个网页起作用
    document.onkeydown = function (e) {
        switch (e.keyCode) {
            case 37:
                l -= 5;
                break;
            case 38:
                t -= 5;
                break;
            case 39:
                l += 5;
                break;
            case 40:
                t += 5;
                break;
        }
        obox.style.left = l + 'px'
        obox.style.top = t + 'px'


    }
</script>

</html>

Sarnwan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-13

事件对象之键盘事件对象e: charcode keycodecharcode用于onkeypresskeycode用于onkeyup/downonkeypress用于字符onkeyup/down用于按键37-40左顺 0-9:48-- a-z:97-- A-Z:65–小例子：按方向键控制盒子移动在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
复制链接

扫一扫

专栏目录