js_javascript 스킬을 활용한 키보드 조작을 통해 div를 이동하거나 변경하는 원리와 코드

어제 키보드 키의 값을 가져오는 이벤트를 녹화했습니다. 그 값은 다른 값에 대해 다른 작업을 수행하는 것에 지나지 않으며 이전에 Snake를 작성할 때 사용되었던 것입니다. 그러다보니 시간이 많이 걸려서 녹음을 해야겠다는 생각도 들기도 하고, 한편으로는 방금 구현한 기능이 또 낯설게 느껴지기도 합니다. 일반적으로 옛 것을 복습하고 새 것을 배우는 것으로 볼 수 있다.

먼저 키보드 조작을 통해 div를 이동하는 일반적인 원리를 분석해 보겠습니다.

*---div의 움직임을 구현하기 위해 가장 먼저 중요한 점은 div 객체를 얻는 것입니다

*---위치: Absolute는 문서 흐름에서 div를 완전히 끌어냅니다. 저는 돌아와서 Snake를 보고 나서야 발견했습니다.

*---키보드 조작 얻기

*---다른 키보드 조작에 따라 다른 응답 제공

이것이 제가 주목해야 할 점입니다. 먼저 코드를 살펴보겠습니다.

먼저 html 부분

<div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">

그런 다음 실제 자바스크립트 동작을 기록해 보세요

window.onload=function(){ 
var obj=document.getElementById("showZone");//获取到对象了吧，这最简单 
var a=10; 
var toLeft=toRight=toTop=toBottom=false;//定义几个boolean型变量，是为了后面方向操作用的，看是四个方向吧 

var move=setInterval(function(){//这个地方的move定义实际上毫无意义，只是为了让这个方法更明显一点 
if(toLeft){ 
obj.style.left=parseInt(obj.offsetLeft-a)+"px";//感觉最好还是写上parseInt，另外，因为offsetLeft是不含px的，所以不要忘记“px” 
} 
if(toRight){ 
obj.style.left=obj.offsetLeft+a+"px";//不写parseInt也可以，难道是因为javascript的执行顺序？执行+，再执行+，再执行=？实现结果来看是 
} 
if(toTop){ 
obj.style.top=obj.offsetTop-a+"px"; 
} 
if(toBottom){ 
obj.style.top=obj.offsetTop+a+"px"; 
} 
},300); //这个经典的定时器啊，循环执行的大神器，还记得setInterval和settimeout的区别么 
document.onkeydown=function(event){ 
var event=event||window.event; 
switch(event.keyCode){ //哈哈，获取到键盘操作了吧 
case 37:toLeft=true;break;//改变变量，继续执行最初的循环，不让你停不能停啊 
case 38:toTop=true;break; 
case 39:toRight=true;break; 
case 40:toBottom=true;break; 
} 
}; 
document.onkeyup=function(event){ 
switch(event.keyCode){ 
case 37:toLeft=false;break;//给我变回来，让你停就别动了 
case 38:toTop=false;break; 
case 39:toRight=false;break; 
case 40:toBottom=false;break; 
} 
}; 
};

이렇게 해서 원리분석의 요구사항을 완성함과 동시에 상하좌우 버튼을 통해 div를 상하좌우로 이동할 수 있습니다. 민감한 장소를 기록하세요.

1. div는 절대적이어야 합니다. 오랫동안 걱정할 가치가 없어서 "문서 흐름"이라는 개념에 대해 좀 알아보았습니다.

문서 흐름은 일반적으로 요소가 위에서 아래로, 왼쪽에서 오른쪽으로 배열되는 것으로 알려져 있으며, 이 요소는 거대한 돔인 노드 요소입니다. 먼저 다른 설명부터 하자면, Document Flow는 이름에서 알 수 있듯이 웹 문서를 의미하며, Flow는 브라우저의 파싱 방식이라고 설명하는 것 같습니다. 좀 더 명확하게 말하면 일반적인 문서 흐름은 평면과 같으며 요소는 어디에 배치하든지 존재하게 됩니다. 상위 레이블은 이전에 z-index가 0이었고 이 z-index가 그 위에 있는 것과 같습니다. 그 위에 매달려 있으면 왼쪽과 위쪽으로 임의로 이동할 수 있습니다.

의미는 알겠지만, 아직도 말로 표현하기 힘든 부분이 있고, 좀 모호한 부분도 경험이 쌓이면 더 깊게 이해할 수 있을 것 같아요.

2. keyCode의 대문자와 onkeyup 및 onkeydown의 소문자는 테스트 후에야 발견된 문제입니다. JavaScript의 경우 모든 작은 부분이 큰 문제입니다.

3. 스위치 중단; 이는 Java에서 자주 발생하므로 자세히 설명하지 않겠습니다.

일반적인 문제는 위의 사항인데, 댓글에 대한 단축키를 아직도 기억하시나요? 그러면 위의 응답은 단일 키에 대해서만 발생합니다. 일부 단축키에 대해 어떻게 설정하나요?

먼저 코드를 살펴보겠습니다.

document.onkeydown=function(event){//还是跟上面差不多的代码吧，你看出不同在哪里了么 
var event=event||window.event; 
var bctrl=event.ctrlKey;//在这里 
switch(event.keyCode){ 
case 37:toLeft=true;break; 
case 38:if(bctrl){obj.style.background="yellow";break;}toTop=true;break;//在这里， 
case 39:toRight=true;break; 
case 40:toBottom=true;break; 
} 
};

여기서는 keyCode 외에 또 다른 속성인 ctrlKey가 대문자로 표시되는 이벤트 객체의 또 다른 속성을 발견합니다. 이 속성의 주요 기능은 Ctrl 키의 상태를 확인하는 것입니다.

altKey와 ShiftKey는 각각 Alt키와 Shift키의 상태를 확인하는 것이므로 단축키 설정 방법을 알아두시면 됩니다.

사실 제가 직접 썼다면 굉장히 만족스러웠을 텐데, 찾아보고 검색하다 보면 늘 생각이 깊은 친구들을 만날 수 있었어요

코드가 첨부되어 있습니다. 무엇을 해야 할지 알고 계시나요?

function limit(){ 
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] 
//防止左侧溢出 
obj.offsetLeft <=0 && (<span style="font-family: Arial, Helvetica, sans-serif;">obj</span><span style="font-family: Arial, Helvetica, sans-serif;">.style.left = 0);</span> 
//防止顶部溢出 
obj.offsetTop <=0 && (obj.style.top = 0); 
//防止右侧溢出 
doc[0] - obj.offsetLeft - obj.offsetWidth <= 0 && (obj.style.left = doc[0] - obj.offsetWidth + "px"); 
//防止底部溢出 
doc[1] - obj.offsetTop - obj.offsetHeight <= 0 && (obj.style.top = doc[1] - obj.offsetHeight + "px") 
}

여기에 첨부하는 것은 인터넷에 있는 코드입니다. 오버플로를 방지하면서 이 쓰기 방법도 앞으로는 더 짧게 작성하도록 노력하겠습니다.