Demo:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body>关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。<center><h3>请自定义上下左右键</h3>上：<inputtype="text"id="up"onkeyup="myFunction('up')"maxlength="1"><br><br>下：<inputtype="text"id="down"onkeyup="myFunction('down')"maxlength="1"><br><br>左：<inputtype="text"id="left"onkeyup="myFunction('left')"maxlength="1"><br><br>右：<inputtype="text"id="right"onkeyup="myFunction('right')"maxlength="1"><br><br><buttononclick="xuigai()">确定修改</button></center><labelid="show"></label><imgid="img"src="feiji.jpg"style="width:100px;height:100px;position:absolute;left:0px;top:0px"><scripttype="text/javascript">varobj=document.getElementById('img');obj.left=0;obj.top=0;varup,down,left,right;varup1,down1,left1,right1;functionxuigai(){up=up1;down=down1;left=left1;right=right1;alert(up+";"+down+";"+left+";"+right);move();}functionmyFunction(str){if(str=="up"){up1=event.keyCode;}if(str=="down"){down1=event.keyCode;}if(str=="left"){left1=event.keyCode;}if(str=="right"){right1=event.keyCode;}}functionmove(){console.log(event.keyCode);if(event.keyCode==parseInt(up)){//上obj.top-=100;}if(event.keyCode==parseInt(down)){//下obj.top+=100;}if(event.keyCode==parseInt(left)){//左obj.left-=100;}if(event.keyCode==parseInt(right)){//右obj.left+=100;}obj.style.left=obj.left+"px",obj.style.top=obj.top+"px";}document.onkeydown=move;</script></body></html>
图片素材：
