JavaScript通过键盘方向键控制盒子移动

最新推荐文章于 2022-05-20 16:26:32 发布

戴翔的技术博客

最新推荐文章于 2022-05-20 16:26:32 发布

阅读量1.2k

点赞数 2

分类专栏：前端开发文章标签： javascript html5 html

本文链接：https://blog.csdn.net/yuanxiang01/article/details/120723384

版权

前端开发专栏收录该内容

58 篇文章

订阅专栏

0. 效果图

在这里插入图片描述

1. 实现代码

html

<head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
    <div class="box" id="box">
    </div>
</body>

javascript

var oBox = document.getElementById('box');
var t = 100;
var l = 100;
document.onkeydown = function (e) {
    console.log(e.keyCode);
    switch (e.keyCode) {
        case 37:
            l -= 3;
            break;
        case 38:
            t -= 3;
            break;
        case 39:
            l += 3;
            break;
        case 40:
            t += 3;
            break;
        default:
            break;
    }
    oBox.style.left = l + 'px';
    oBox.style.top = t + 'px';
}