<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> <style> #divid{ width: 100px; height: 100px; background:red; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div id="divid"> </div> <script type="text/javascript"> //定义三个值 var x = 100; //x表示横坐标 var y = 100; //y表示纵坐标 var v = 10; //v表示每次变动的值,也可以直接在给坐标赋值时直接加数值 document.onkeydown = function(event){ //获取需要改变的标签对象 var divobj = document.getElementById("divid"); //获取键盘输入键位的代表数字 var keyobj = event.keyCode; switch(keyobj){ //匹配到38数字的代表值为左箭头 case 37: //把x坐标进行改变,加上每次运动的值 x += -v; //然后把进行加减操作后的x值赋值给元素对象的纵坐标 divobj.style.left = x+"px"; //匹配结果结束 break; //以下同理 case 38: y += -v; divobj.style.top = y+"px"; break; case 39: x += v; divobj.style.left = x+"px"; break; case 40: y += v; divobj.style.top = y+"px"; break; } } </script> </body> </html>
[封装插件]键盘录入可上下左右移动的元素
最新推荐文章于 2025-07-25 02:24:36 发布