목차
9. URL / 휴대 전화 번호 정기 매칭 / 문자와 숫자 조합 / 영숫자 특수 기호 조합
1. 분리 문자열
요구 사항 : js 프로그램은 URL에서 각 get 매개 변수를 추출합니다.
아이디어 : 1. split ( 'separator')을 사용하여 문자열을 분리하고 배열을 반환합니다.
2. 배열의 각 항목을 객체의 키-값 쌍으로 이동합니다. 배열의 첫 번째 항목은 키이고 값은 배열의 두 번째 항목입니다.
2. 창 스크롤 바-맨 위로
요구 사항 : 1. 페이지를 스크롤합니다. 페이지가 500px로 스크롤되면 맨 위로 이동 버튼이 나타납니다.
2. 페이지 맨 위로 바로 돌아가려면 맨 위로 이동 버튼을 클릭합니다.
아이디어 : onscroll 창 스크롤 막대로 스크롤 할 때 이벤트를 트리거합니다. .srcollTop은 말리는 페이지의 높이를 가져 와서 페이지가 말리지 않도록 맨 위로 돌아갑니다. top = 0;
3. 지연된 사진 로딩
지연로드-많은 사진이 있습니다. 필요할 때로드하고, 스크롤하면서로드합니다. <img src = ""_src = ""> _ src 사용자 정의 속성-로드 할 사진의 주소를 저장합니다.
요구 사항 : 그림 요소가 페이지의 가시 영역에 들어가면 그림이 표시됩니다.
아이디어 : 1. 페이지 스크롤 거리 + 화면의 보이는 높이> = 현재 요소와 페이지 상단 사이의 거리->로드 할 이미지가 표시되고 _src 값이 src 속성
2. 페이지 진입시 콘텐츠가 표시되고 레이지 로딩 이벤트가 먼저 실행됩니다.
4. 드롭 다운 목록 스타일
요구 사항 : 1. span 태그를 클릭하여 ul을 표시합니다.
2. ul을 숨기려면 빈 부분을 클릭하십시오.
3. 목록의 각 항목을 클릭하여 ul을 숨기고, 콘텐츠를 범위에 할당하고, 주황색 배경색을 li에 추가합니다.
아이디어 : 1. 스팬과 공백은 동일한 클릭 이벤트이며 버블 머신은 evs.stopPropagation과 호환됩니까? Evs.stopPropagation () : evs.cancelBubble = true;
2. 클릭 한 옵션 내용을 스팬에 할당하고 배경색을 설정합니다.
5. 페이지 글꼴 줌 스크롤 휠 이벤트
요구 사항 : 대화 형 마우스 휠, 확대 또는 축소를위한 페이지 글꼴
아이디어 : 1. Wheel event-chrome \ ie : onmousewheel; ff : 이벤트 바인딩은 모니터링에 사용되어야합니다. label.addEventListener ( 'DOMMouseScroll', 이벤트 처리 기능);
2. evs.wheelDelta 속성을 사용하여 판단합니다. 이는 Firefox에서 정의되지 않습니다.
6. 마우스가 요소를 눌러 드래그 효과를 얻습니다.
요구 사항 : 마우스를 눌러 요소를 마우스 방향으로 움직이게하고 요소를 올려도 마우스가 움직이지 않습니다.
아이디어 : 마우스를 눌렀을 때 화면의 왼쪽 / 위에서 마우스의 거리를 찾고, 요소를 클릭하고, 요소의 왼쪽 / 위에서 요소 내 거리, 요소에서 요소까지의 거리를 클릭합니다. 화면 왼쪽 / 위
경계 값 설정 : 요소와 화면의 왼쪽 위 / 왼쪽 사이의 거리를 결정하기 위해 마우스로 요소를 화면의 왼쪽 위, 왼쪽 아래, 오른쪽을 넘어 드래그하지 못하도록합니다.
7. 목록 내용 추가 및 삭제
요구 사항 : 1. 추가 버튼을 클릭하면 입력 대화 상자가 나타나며 내용을 입력 한 후 확인을 클릭하여 목록에 라인을 추가하고 취소를 클릭하면 아무것도하지 않습니다.
2. 수정을 클릭하면 입력 대화 상자가 나타나며 내용을 입력 한 후 확인을 클릭하여 해당 행의 내용을 수정하고 취소를 클릭하면 진행하지 않습니다.
아이디어 : 1. 페이지 레이아웃 ul> li> span * 3, 팝업 입력 대화 상자 가져 오기 : prompt ( 'prompt content', 'input box default content'), 사용자 입력 값 반환
2. li 요소의 동적 추가는 향후 사용 이벤트 프록시에서 발생하여 클릭 이벤트를 ul에 추가하고, 목록 콘텐츠 노드를 가져오고, 대상 노드를 수정 및 삭제합니다.
수정 된 콘텐츠를 목록 콘텐츠 노드에 추가하고 삭제하여 부모 parentNode 노드를 가져와 제거합니다.
8. 텍스트 내용은 스크롤 막대의 위치에 해당합니다.
요구 사항 : 스크롤 막대의 오른쪽에있는 스크롤 휠의 위치는 왼쪽에있는 텍스트 콘텐츠의 해당 위치에 해당합니다. 즉, 텍스트가 50 %에 도달하고 스크롤 휠이 화면의 50 % 위치에 있습니다. 스크롤 바
아이디어 : x1 / x2 = y1 / y2; x1 : 휠이 스크롤 된 거리, x2 : 휠이 스크롤 될 수있는 거리, y1; 페이지가 스크롤 된 거리, y2 : 페이지가 스크롤 된 거리 콘텐츠 스크롤 가능
x1 : 스크롤 휠과 스크롤 막대 상단 사이의 거리 = 마우스와 화면 상단 사이의 거리-마우스와 스크롤 휠 상단 사이의 거리
x2 : 스크롤 휠의 스크롤 가능 거리 = 스크롤 막대의 보이는 높이-스크롤 휠의 높이
y2 : p 레이블 내용의 스크롤 가능 범위 = 전체 p의 높이-현재 화면의 높이
y1 = x1 * y2 / x2
9. URL / 휴대 전화 번호 정기 매칭 / 문자와 숫자 조합 / 영숫자 특수 기호 조합
