<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件小练习</title> <style> #mydiv{ width: 30px; height: 30px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="mydiv"></div> <script> var myDiv = document.getElementById("mydiv"); var xs = 0; var xv = 30; var ys = 0; var yv = 30; document.onkeydown = function(event){ var kc = event.keyCode; switch (kc){ case 37: xs -= xv; myDiv.style.left = xs+"px"; myDiv.style.backgroundColor = "red"; break; case 38: ys -= yv; myDiv.style.top = ys + "px"; myDiv.style.backgroundColor = "blue"; break; case 39: xs+=xv; myDiv.style.left = xs+"px"; myDiv.style.backgroundColor = "green"; break; case 40: ys += yv; myDiv.style.top = ys + "px"; myDiv.style.backgroundColor = "yellow"; break; } } </script> </body> </html>