第一步：先获取按键的键码（按下哪个键）
使用DOM（文档对象模型）或者jQuery（js常用框架）实现
完整代码（之后只给js部分）：
<!DOCTYPE html><html><head><title>键盘事件</title></head><body style="text-align: center;"><h1>键盘事件</h1><p id="demo1"></p><p id="demo2"></p></body><script type="text/javascript" src="jquery-3.6.0.js"></script><script type="text/javascript">//DOM实现/*事件监听函数说明addaddEventListener(even，function(),true/false)第一个参数是事件，例如"click",引号是必须的，不要用on开头，例如"onclick"。第二个参数是函数，可以传参，例如function(even){代码段}。第三个参数可选，使用布尔值，决定事件监听顺序（冒泡或者捕获），新手（包括本人）一般不使用事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象；事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。*/document.addEventListener("keydown",function(even){document.getElementById("demo1").textContent ="按下的键码是：" + even.keyCode;});//jQuery实现/*jQuery方法说明$(element)选中元素，直接选中或者通过id，类等方法选中.method()执行方法，具体方法请查询：/jquery/jquery_reference.asp*/$(document).keydown(function(even){$("#demo2").text("按下的键码是：" + even.keyCode);})/*特别说明：document和jquery选中元素后改变文本方式不同： = 和 ()个人理解是:textContent是元素的一个属性，而text是jquery的一个方法（jquery本质是一个js文件，是一个方便的框架）*/</script></html>
第二步：根据不同的键码实现不同的功能
使用if或者switch判断执行函数
$(document).keydown(function(even){//$("#demo2").text("按下的键码是：" + even.keyCode);switch(even.keyCode){case 37: alert("左移");break;case 38: alert("上移");break;case 39: alert("右移");break;case 40: alert("下移");break;}})
