JavaScript 및 jQuery 로 간단한 경품 추첨 애플리케이션 만들기

소개

이 프로젝트에서는 JavaScript 와 jQuery 를 사용하여 간단한 경품 추첨 애플리케이션을 만드는 방법을 배웁니다. 이 애플리케이션은 경품 목록을 회전시키고 회전이 멈출 때 당첨 경품을 표시하여 경품 추첨을 시뮬레이션합니다.

👀 미리보기

Prize draw animation preview

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

프로젝트 파일 및 디렉토리를 설정하는 방법
경품 회전을 처리하고 당첨 경품을 표시하는 rolling 함수를 구현하는 방법
프로젝트가 예상대로 작동하는지 테스트하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

JavaScript 와 jQuery 를 사용하여 대화형 웹 애플리케이션을 만들 수 있습니다.
requestAnimationFrame을 사용하여 간단한 애니메이션 루프를 구현할 수 있습니다.
사용자 상호 작용을 처리하고 UI 를 적절하게 업데이트할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
│   └── style.css
├── index.html
└── js
    ├── index.js
    └── jquery.js

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

unfinished project structure

회전 기능 구현

이 단계에서는 jQuery 또는 JavaScript 를 사용하여 index.js에서 rolling 함수를 구현합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

index.js에서 rolling 함수를 찾습니다.
다음 요구 사항을 충족하도록 rolling 함수를 개선합니다.
- 시작 버튼을 클릭하면 li1의 class 요소가 시작 지점이 되고, 노란색 배경 (class .active) 이 경품에서 시계 방향으로 회전합니다.
- 회전이 멈추면, 페이지의 award 요소인 id에 당첨 힌트가 표시됩니다. 당첨 힌트에는 제목의 이름과 정확히 일치해야 하는 경품 이름이 포함되어야 합니다.
- 회전 간격 및 회전 중지 조건이 주어집니다.

rolling 함수와 동일한 레벨에서 변수 num을 정의하고 기본값을 -1 로 설정합니다. num과 rolling 함수 내의 특정 코드를 다음과 같이 설정합니다.

// ...

// TODO: 이 함수를 완성하세요.
let num = -1; // 회전 후 위치한 요소의 인덱스

function rolling() {
  time++; // 회전 수 + 1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 재귀 애니메이션 수행
  }, speed);
  num++; // 인덱스 + 1
  if (num > 8) {
    // 인덱스가 7 보다 크면 0 으로 재설정 (경품이 8 개이므로)
    num = 1;
  }
  // 당첨 li 에 active 클래스 추가
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // 회전 수가 총 회전 수보다 크면 회전을 멈추고 타이머를 지웁니다.
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "index");
    console.log($(".li" + num).text());
    // 당첨 정보 표시
    $("#award").text(
      `축하합니다! ${$(".li" + num).text()}에 당첨되셨습니다!!!`
    );
    time = 0;
    num = -1;
    return;
  }
}

프로젝트 테스트

이 단계에서는 프로젝트가 예상대로 작동하는지 확인하기 위해 프로젝트를 테스트합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

js/index.js 파일에 변경 사항을 저장합니다.
브라우저에서 페이지를 새로 고칩니다.
"Start" 버튼을 클릭하여 경품 추첨을 시작합니다.
회전이 멈출 때 경품의 회전과 당첨 힌트의 표시를 관찰합니다.
프로젝트가 올바르게 작동하는지 확인하기 위해 3-4 단계를 몇 번 반복합니다.

완성된 결과는 다음과 같습니다.

Prize draw animation result

축하합니다! 경품 추첨 프로젝트를 완료했습니다. 질문이나 문제가 발생하면 언제든지 문의하십시오.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.