js键盘控制div移动
时间: 2023-10-01 14:05:53 浏览: 50
你可以使用JavaScript监听键盘事件,通过修改div的css来实现移动。以下是一个简单的实现示例:
HTML代码:
```html
<div id="box"></div>
```
CSS代码:
```css
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
```
JavaScript代码:
```javascript
var box = document.getElementById("box");
var step = 10; // 移动距离
document.onkeydown = function(e) {
e = e || window.event;
switch (e.keyCode) {
case 37: // 左箭头
box.style.left = parseInt(box.style.left) - step + "px";
break;
case 38: // 上箭头
box.style.top = parseInt(box.style.top) - step + "px";
break;
case 39: // 右箭头
box.style.left = parseInt(box.style.left) + step + "px";
break;
case 40: // 下箭头
box.style.top = parseInt(box.style.top) + step + "px";
break;
default:
break;
}
};
```
在上面的代码中,我们首先获取了要移动的div元素和每次移动的距离step。然后通过监听键盘事件,根据不同的键码来修改div的left和top属性,从而实现移动。其中,parseInt()函数用于将字符串类型的left和top属性值转换为数值类型。