本文主要是介绍通过键盘方向键，控制一个div盒子在屏幕上移动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
学了DOM的小伙伴几乎都遇到过这个小作业，废话不多说，上代码！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="user" style="height: 200px;width: 300px;background-color: royalblue; position:absolute;"></div>
//定义一个盒子模型<script> document.onkeydown= function fn(e){ //进行盒子移动var oDiv = document.getElementById('user'); //找到盒子的ID//var oEvent = e||event;switch(e.keyCode){ //进行一个键盘字符的判断 左上右下分别对应的码值是 37、38、39、40case 37: oDiv.style.left = oDiv.offsetLeft - 10 + 'px';break;case 38: oDiv.style.top = oDiv.offsetTop - 10 + 'px';break;case 39: oDiv.style.left = oDiv.offsetLeft + 10 + 'px';break;case 40: oDiv.style.top = oDiv.offsetTop + 10 + 'px';break;}}</script>
</body>
</html>
这篇关于通过键盘方向键，控制一个div盒子在屏幕上移动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
