JavaScript--键盘控制div移动

最新推荐文章于 2023-11-18 23:34:40 发布

VIP文章 Felece

最新推荐文章于 2023-11-18 23:34:40 发布

阅读量392

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_51651340/article/details/124900673

版权

按键盘的上下左右按钮-->div移动

<body>
    <div id="ok"></div>
</body>
<script>
    var dOk = document.getElementById("ok");
     window.onkeydown = function (e) {
         var l = dOk.offsetLeft;
         var t = dOk.offsetTop;
         if (e.keyCode === 37) {
             l -= 5;
         } else if (e.keyCode === 38) {
             t -= 5;
         } else if (e.keyCode === 39) {
             l += 5;
         } else if (e.keyCode === 40) {
             t += 5;
         }
         dOk.style.left = l + 'px';
         dOk.style.top = t + 'px';
     }
</script>

这样写按上下左右键div盒子运动不自然，而且只能直上直下不能斜着走。

<script>
//合适的打开方式：计时器＋状态
    //计时器
    var timer = null;
    //状态
    var isLeft = false;

最低0.47元/天解锁文章

Felece

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--键盘控制div移动

按键盘的上下左右按钮-->div移动<body> <div id="ok"></div></body><script> var dOk = document.getElementById("ok"); window.onkeydown = function (e) { var l = dOk.offsetLeft; var t = dOk.offsetTop;
复制链接

扫一扫