로또 번호 추첨기

무작위 숫자 여섯개를 가져오는 로또번호 추첨기 만들기

버튼을 누르면 1부터 45까지의 무작위 숫자를 가져오는 스크립트를 만들어보도록 하겠습니다.

 

Javascript 작성하기

바로 스크립트로 넘어 가겠습니다 !

const Button = document.querySelector(".btn");
const noticeNum = document.querySelector(".number");
const lottoNum = new Set();

const drawLot = () => {
    for(i=1; i<=45; i++){
        lottoNum.add(i);
    }
    let winnerNum = [];
    for(let i=1; i<=6; i++){
        let randomNum = Math.floor(Math.random() * lottoNum.size);
        let count = 0;
        for(const number of lottoNum){
            if(count == randomNum){
                winnerNum.push(number);
                lottoNum.delete(number);
                break;
            }
            count++;
        }
    }
    if(winnerNum.length === 6){
        for(let i=0; i<5; i++){
            for(let j=i+1; j<6; j++){
                if(winnerNum[i] > winnerNum[j]){
                    temp = winnerNum[i];
                    winnerNum[i] = winnerNum[j];
                    winnerNum[j] = temp;
                }
            }
        }
        noticeNum.innerHTML = `🎉 ${winnerNum.join(" . ")} 🎉`
    } else {
        drawLot();
    }
};

Button.addEventListener("click", () => drawLot());

Javascript 정리해보기

• 클릭 이벤트를 줄 버튼과 무작위로 나온 번호를 적어 줄 곳의 선택자를 만들었습니다.
• lottoNum 이라는 Set을 하나 만들었습니다.
• drawLot() 함수 (제비 뽑기)
• for문을 사용해 1부터 45까지의 숫자를 lottoNum Set에 추가합니다.
• winnerNum 이라는 빈 배열을 만듭니다.
• 여섯 번 반복하는 for문을 사용합니다.
• randomNum이라는 변수에 Math.random에 lottoNum의 size를 곱한 값에 Math.floor를 해주어 1부터 45의 무작위 값을 저장합니다.
• count 변수에 0을 저장합니다. ( randomNum과 비교 )
• for of문을 사용해 count와 randomNum이 같을 때, lottoNum의 요소를 winnerNum배열에 push합니다.
• push한 요소는 lottoNum Set에서 삭제합니다.
• 불필요한 중복을 막기위해 break문을 사용합니다.
• count에 ++연산을 합니다. ( 총 여섯 번 반복합니다.)
• for문이 종료되고 winnerNum의 요소 개수가 6개면 낮은 수 부터 차례로 정렬합니다. (정렬하는 for문)
• noticeNum에 winnerNum의 요소를 출력합니다. (join 사용)
• winnerNum의 요소 개수가 6개가 아니라면 drawLot()함수를 다시 실행합니다.

 

• Button에 addEventListener를 사용하여 click했을 시 drawLot()함수를 실행합니다.

 

 

 

이상으로 무작위 여섯개의 번호를 출력하는 스크립트를 작성해 보았습니다 !