event 事件 键盘控制div移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
				
				
			}
		</style>
		<script>
			document.onkeydown = function(ev){
				var oEvent = ev||event;
				var oDiv = document.getElementById("div1");
				
				if(oEvent.keyCode == 37)
				{
					oDiv.style.left = oDiv.offsetLeft - 10 +"px";
					
				}
				if(oEvent.keyCode == 39)
				{
					oDiv.style.left = oDiv.offsetLeft + 10 +"px";
				}
				
				if(oEvent.keyCode ==38)
				{
					oDiv.style.top = oDiv.offsetTop -10 +"px";
				}
				if(oEvent.keyCode ==40)
				{
					oDiv.style.top = oDiv.offsetTop +10 +"px";
				}
			
				
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/mingjixiaohui/p/5268790.html