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';
}

JavaScript通过键盘方向键控制盒子移动相关推荐

html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
JS实战之使用键盘方向键控制方块的上下左右移动
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head><meta charset="UTF-8" ...
python通过键盘方向键移动_移动python教程!python中怎么用键盘方向键控制方块的移动...
python中怎么用键盘方向键控制方块的移动感象是在用TKinter绘图.在tkinter里有一键射表.左键也在其中. KeyPress-xx 这个xx是键盘的号码.不在button.tcl里.需己 ...
C语言 ACLLib键盘方向键控制图形移动以及鼠标控制图形移动
C语言 ACLLib键盘方向键控制图形移动以及鼠标控制图形移动鼠标的参数键盘的参数键盘方向键控制图形移动鼠标控制图形移动鼠标的参数 button:5:没有按下鼠标1:按下左键2:按下中键3: ...
JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动
注: 键盘事件onkeydown 按键按下如果按住按键不松,则该事件会连续触发当onkeydown连续触发时,第一次和第二次之间会间隔时间稍长,其他的会非常快这种设计是为了防止一些误操作onkeyup ...
通过键盘方向键控制TreeView节点的移动
本文转载:http://dengzebo.blog.163.com/blog/static/18867406201032141932204/ View Code #region "控制树节点 ...
键盘方向键控制div移动
直接上代码,尚硅谷牛逼 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
QT5.12案例通过键盘方向键控制label移动
QDialog类定义了键盘事件. #include <QKeyEvent>//按键按下时执行的事件处理函数virtual void keyPressEvent(QKeyEvent*);// ...
JavaScript通过键盘让div盒子上下左右的移动
#直接上代码 <script>var box = document.getElementById("mytank");document.onkeydown = keyD ...

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

0. 效果图

1. 实现代码

JavaScript通过键盘方向键控制盒子移动相关推荐

最新文章

热门文章