개요
1~45까지의 숫자 중에 7개를 뽑아서 1초마다 보여줌.
피셔예이츠 셔플, 비동기, 스코프/클로저
github: https://github.com/raquim47/study/blob/main/zero/js/lotto.html
github.io: https://raquim47.github.io/study/zero/js/lotto
강의: https://youtu.be/Nw8-BZTrI3c
실행컨텍스트: https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0
순서도
html
<style>
.ball {
display: inline-block;
color: white;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
</style>
<body>
<div id="result">추첨 결과는? </div>
<div id="bonus">보너스: </div>
</body>javascript
- 1부터 45까지 랜덤한 숫자 배열 만들기
const candidate = Array(45).fill().map((item, i) => i + 1);
const shuffle = [];
const $result = document.querySelector('#result');
const $bonus = document.querySelector('#bonus');
//while문
while (candidate.length > 0) {
const random = Math.floor(Math.random() * candidate.length);
const spliceArray = candidate.splice(random, 1);
shuffle.push(spliceArray[0]);
}
//while -> for문으로 바꿔보기
for(let i= candidate.length; i > 0; i--){
const random = Math.floor(Math.random() * i);
const spliceArray = candidate.splice(random, 1);
shuffle.push(spliceArray[0]);
}
- 7개 공 뽑기 (1개는 보너스)
- splice()와 slice()의 차이:
splices는 배열의 기존 요소를 수정(추가,삭제,변경)하고 제거한 요소를 배열에 담아 반환,
slice는 추출할 요소를 포함한 새로운 배열을 반환(원본을 건들지 않음!)
// sort((a,b)=>a-b) 오름차순 정렬
// sort((a,b)=>b-a) 내림차순 정렬
const winBalls = shuffle.slice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
- 1초 마다 화면에 보여주기, 숫자마다 색깔 입히기
const colorize = (number, $tag) => {
if (number < 10) {
$tag.style.background = 'thistle';
} else if (number < 20) {
$tag.style.background = 'teal';
} else if (number < 30) {
$tag.style.background = 'slateblue';
} else if (number < 40) {
$tag.style.background = 'chocolate';
} else {
$tag.style.background = 'royalblue';
}
}
const showBall = (number, target) =>{
const $ball = document.createElement('div');
$ball.className = 'ball';
$ball.innerText = number;
colorize(number, $ball);
target.append($ball);
}
for(let i=0; i < winBalls.length; i++){
setTimeout(()=>{
showBall(winBalls[i], $result);
}, (i + 1) * 1000)
}
setTimeout(() => {
showBall(bonus, $bonus)
}, 7000);