键盘控制层的移动 请分别按下 ↑、↓、←、→， 试试看有什么效果？ 컨트롤 키 설정: 위로 이동: 아래로 이동: >왼쪽으로 이동: 오른쪽으로 이동: < "오른쪽" type="text" value="→" size="6"> 각 이동 px; <br><!-- <BR>//alert(txt.style.top); <BR>var up,down,left,right; <BR>up = 38; <BR>down = 40 ; <BR>left = 37; <BR>right = 39; <BR>function document.onkeydown() <BR>{ <BR>// Alert(event.keyCode)//left ：37 38 오른쪽: 39 아래쪽: 40 <BR>var int; <BR>int =parseInt(document.getElementById("Int").value) <BR>if(int == "NaN") <BR> int = 5 ; <BR>var str = "",press,evet; <BR>var div = document.getElementById("Div") <BR>var txt = document.getElementById("Txt"); .srcElement.tagName == "INPUT") <BR>{ <BR> if(event.srcElement == document.getElementById("Int")) <BR> { <BR> if(event.keyCode = = 13) <BR> document.body.focus(); <BR> if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event. keyCode >= 37 && event.keyCode <= 40) ) <br> event.returnValue = false <br> return <br> } <br> else <br> { <br> 스위치( event.keyCode) <br> { <br> 사례 37:{ <br> event.srcElement.value = "←"; <br> break; <br> } <br> 사례 38:{ <br> event.srcElement .value = " ↑"; <br> break; <br> } <br> 케이스 39:{ <br> event.srcElement.value = "→"; <br> break; <br> } <br> 케이스 40:{ <br> event.srcElement.value = "↓"; <br> break; <br> } <br> } <br> 스위치(event.srcElement) <br> { <br> 케이스 document.getElementById(" Up"): { <br> up = event.keyCode; <br> break; <br> } <br> 케이스 document.getElementById("Down"):{ <br> down = event.keyCode <br> } <br> case document.getElementById("Left"):{ <br> left = event.keyCode; <br> break; <br> } <br> case document.getElementById("Right"): { <br> right = event.keyCode; <br> break <br> } <br> } <br> } <br>} <br>else <br>{ <br> 스위치(event.keyCode) <br> { <br> 케이스 왼쪽:{ <br> press = "<font> ← </font>"; <br> evet = "<font><b>왼쪽</b>< ;/font>로 이동" " " int " px. "; <br> div.style.left = (parseInt(div.currentStyle.left) - int) "px"; <br> if(parseInt(div.style.left) <= 0) <br> { <br> evet = "<font>맨 왼쪽</font>에 도달했으며 더 이상 <font>왼쪽</font>으로 이동할 수 없습니다."; <br> div.style.left = "0px"; <br> break ; <br> } <br> break; <br> } <br> 케이스 업:{ <br> press = "<font> ↑ </font>"; <br> evet = "<font>이동</font>" <b>up</b>" " " int " px. "; <br> div.style.top = (parseInt(div.currentStyle.top) - int) "px"; <br> if(parseInt(div.style.top) <= 0) <br> { <br> evet = "<font>상단</font>에 도달했으며 <font>위로</font> 이동할 수 없습니다. "; <br> div.style.top = "0px"; <br> break; <br> } <br> break; <br> } <br> 대소문자 오른쪽:{ <br> press = "<font> → </font>"; <br> evet = "<font>이동</font>"을 <b>오른쪽</b>" " " int " px . "; <br> div.style.left = (parseInt(div.currentStyle.left) int) "px"; <br> if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) ) -parseInt(div.offsetWidth))) <br> { <br> div.style.left =parseInt(document.body.clientWidth) -parseInt(div.offsetWidth) <br> evet = "이미 도착했습니다 <font> ;가장 오른쪽은 더 이상 <font>오른쪽으로</font> 이동할 수 없습니다. "; <br> break; <br> } <br> break; <br> } <br> 케이스 다운:{ <br> press = "<font> ↓ </font>"; <br> evet = "<font>이동</font> <b>아래</b>" " " int " px. "; <br> div.style.top = (parseInt(div.currentStyle.top) int) "px"; <br> if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) ) -parseInt(div.offsetHeight))) <br> { <br> div.style.top =parseInt(document.body.clientHeight) -parseInt(div.offsetHeight) <br> evet = "이미 도착했습니다 <font> ;하단</font>은 <font>아래로</font> 이동할 수 없습니다. "; <BR> break; <BR> } <BR> break; <BR> } <BR> 기본값: <BR> { <BR> return; <BR> } <BR> } <BR> str = "< p>"press" 키를 눌렀습니다.</p>"; <br> str = "<p>이 레이어" evet; <br> txt.innerHTML = str; <br>} <br> } <br>//--> <br> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
