요구사항은 다음과 같습니다.
1. 웹페이지에 모든 학급 구성원의 이름을 표시합니다.
2. 시작 버튼을 클릭하면 사람의 색상이 바뀌기 시작합니다. 멈추면 다른 색상의 위치가 나타나며, 이 위치가 클릭한 학생입니다.
대략적인 그래픽 인터페이스는 다음과 같습니다.
위 요구사항 분석을 구체적으로 분석하면 다음과 같습니다.
1 . 해당 페이지를 초기화하고 균일한 색상을 녹색으로 설정합니다.
a. 반 친구들의 이름을 배열로 저장합니다
b. div 블록을 사용하여 페이지에 표시합니다.
2. 무작위로 위치를 선택하고 색상을 변경합니다. red
a. CSS 스타일을 사용하여 색상 변경
b. 임의의 위치를 생성하기 위해 임의 기능을 사용합니다
3. 간격 시간 색상 변경 위치가 뒤로 이동합니다. 그리고 이전 위치의 색상을 녹색으로 복원합니다.
a. div의 색상을 변경하는 메소드를 설계해야 하며 동시에 뒤로 이동할 때 간격으로 호출되는 메소드를 호출해야 합니다. 그 다음에는 settimeout 및 setinterval 메소드가 있습니다.
4. 애니메이션 효과는 지정된 시간 내에 중지되어야 하며 중지 위치는 여전히 빨간색입니다.
a. 애니메이션 효과가 지정된 시간 내에 중지됩니다. 이는 실제로 위 방법을 중지하는 것을 의미합니다. js에서 다른 방법을 사용하고 다른 구현 형식을 갖습니다
5. 특정 위치에서 멈춘 후 선택한 학생이 누구인지 묻는 대화 상자가 나타납니다.
a.Alert 기능이 최종 결과를 팝업으로 표시하고 괜찮을 것입니다.
다음 섹션에서는 이 작은 애플리케이션을 자바스크립트 코드로 구현하겠습니다.