js键盘事件:通过方向键,移动盒子。
时间: 2024-03-26 14:35:41 浏览: 57
好的,可以通过监听键盘事件来实现这个功能。以下是一个简单的实现:
HTML 代码:
```html
<div id="box"></div>
```
CSS 代码:
```css
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
```
JavaScript 代码:
```javascript
const box = document.getElementById('box');
let left = 0;
let top = 0;
document.addEventListener('keydown', (event) => {
switch (event.keyCode) {
case 37: // 左箭头
left -= 10;
box.style.left = left + 'px';
break;
case 38: // 上箭头
top -= 10;
box.style.top = top + 'px';
break;
case 39: // 右箭头
left += 10;
box.style.left = left + 'px';
break;
case 40: // 下箭头
top += 10;
box.style.top = top + 'px';
break;
}
});
```
这段代码会监听整个文档的键盘事件,当用户按下方向键时,会根据不同的键码值来判断是左、上、右还是下的方向键,然后分别更新盒子的位置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)