어제 키보드 키의 값을 가져오는 이벤트를 녹화했습니다. 그 값은 다른 값에 대해 다른 작업을 수행하는 것에 지나지 않으며 이전에 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 키의 상태를 확인하는 것입니다.
사실 제가 직접 썼다면 굉장히 만족스러웠을 텐데, 찾아보고 검색하다 보면 늘 생각이 깊은 친구들을 만날 수 있었어요
코드가 첨부되어 있습니다. 무엇을 해야 할지 알고 계시나요?
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") }