1. HTML 세팅하기

2. 공 뽑기

const candidate = Array(45).fill().map((v,i)=>i+1);
const shuffle = [];
while(candidate.length > 0) {
    const random = Math.floor(random() * candidate.length);
    const spliceArray = candidate.splice(random,1); //splice 함수의 특성상 빠진 값은 배열에 넣어서 return
    shuffle.push(spliceArray[0]);
}

• const candidate = Array(45).fill().map((v,i)=>i+1);
• 피셔 에이츠 셔플(Fisher-Yates Shuffle) 알고리즘을 통해 45개의 공 전체를 랜덤하게 섞는다.

const winBalls = shuffle.slice(0,6).sort((a,b) => a-b);
const bonus = shuffle[6];

• sort()함수를 사용하여 공들을 작은 순서대로 보여준다.

3. 시간차로 로또공 띄우기

for(let i = 0; i<winBalls.length; i++) {
      setTimeout(()=>{
      const $ball = document.createElement('div');
      $ball.className = 'ball';
      $ball.textContent = winBalls[i];
      $result.append($ball);
   }, (i+1) * 1000);
}; 

소스코드 전체 확인하기

https://github.com/tae100k/VanillaJS-Lottery