요구 사항은 다음과 같습니다.
1. 웹 페이지의 수업에있는 모든 사람들의 이름을 표시하십시오.
2. 시작 버튼을 클릭하면 사람의 색상이 변경되기 시작합니다. 그것이 멈출 때, 다른 색상의 위치가 있으며,이 위치는 클릭 한 학생입니다.
거친 그래픽 인터페이스는 다음과 같습니다.
다음은 다음과 같이 위의 요구 사항 분석에 대한 구체적인 분석입니다.
1. 해당 페이지를 초기화하고 통합 색상 -녹색을 설정하십시오.
에이. 학생의 이름은 배열에 저장됩니다
비. 페이지의 div 블록에 표시하십시오
2. 색상을 -RED로 변경할 위치를 무작위로 선택하십시오.
에이. CSS 스타일을 사용하여 색상 변경을 제어하십시오
비. 임의의 위치는 랜덤 함수를 사용하여 생성됩니다
3. 애니메이션 효과를 만들기 위해 간격 시간을 설정하여 색상 변경 위치를 뒤로 이동하십시오. 이전 위치의 색상을 녹색으로 복원하십시오.
에이. div의 색상을 변경하는 방법을 설계해야합니다. 동시에, 당신은 Interval Time이라는 메소드를 호출해야합니다. 그런 다음 JS에서 settimeout과 setinterval 메소드를 선택할 수 있습니다.
4. 지정된 시간 내에 애니메이션 효과가 중지되고 정지 위치는 여전히 빨간색입니다.
에이. 애니메이션 효과는 지정된 시간 내에 중지되며 실제로 위의 방법을 중지합니다. 구현 양식과 함께 JS에서 다른 방법을 사용하십시오
5. 특정 위치에서 멈출 때, 선택한 학생이 누구인지를 보여주는 대화 상자가 나타납니다.
에이. Alert 함수 팝업의 최종 결과는 괜찮습니다.
다음 섹션에서는이 작은 응용 프로그램이 JavaScript 코드로 구현됩니다.