让div跟按键走，基本键码

时间 2019-11-11

标签 div 按键基本键码栏目 CSS 繁體版

原文原文链接

---恢复内容开始---javascript

想要快速的作这样一个简单效果，首先要明白它的原理;css

　　　　样式设置的重点，就是要跟上次拖拽同样，给该元素绝对定位，html

　　　　事件就是onkeydown,事件，经过判断键码，来执行；java

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#dDiv{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var dDiv=document.getElementById("dDiv")
				var a=8;
				var b=8;
				
				window.onkeydown = function(e){
					if(e.keyCode==37){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//左
//						当鼠标按下时判断键码
						dDiv.style.left=b-- +"px"
					}
					if(e.keyCode==38){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//上
						dDiv.style.top=a-- +"px"
					}
					if(e.keyCode==39){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//右
						dDiv.style.left=b++ +"px"
					}
					if(e.keyCode==40){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//下
						dDiv.style.top=a++ +"px"
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="dDiv">
			
		</div>
	</body>
</html>

　　　　2.熟悉一下常使用的特殊键码：spa

按键 键码 按键 键码 按键 键码 
BackSpace 8 Esc 27 Right Arrow 39 Tab 9 Spacebar 32 Down Arrow 40 Clear 12 Page Up 33 Insert 45 /? 191 Enter 13 Page Down 34 Delete 46 `~ 192 -_ 189 .> 190 Shift 16 End 35  Num Lock 144 [{219 Control 17 Home 36 ;: 186 /| 220 Alt 18 Left Arrow 37 =+ 187  ]} 221   Cape Lock  20

---恢复内容结束---htm