讓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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。