🔍 순서도 만들기
🔍 HTML 형식
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>로또추첨기</title>
<style>
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="result">추첨 결과는? </div>
<div id="bonus">보너스: </div>🔍 1부터 45까지의 숫자 만들기
원래라면 for 문을 사용해서 만들었겠지만 이번에는 fill과 map 메서드를 사용해서 만들었다.
const numbers = new Array(45).fill(); //[undefined, undefined, undefined, undefined ....]일단 45개 항목을 가지고 있는 빈 배열을 만들어준 후에
const numbers = new Array(45).fill().map((a, i) => i+1 ); //[0, 1, 2, 3 ... 45]map 메서드를 통해서 index에 1을 더하는 방향으로 1부터 45 값을 채워주었다.
🔍 숫자들을 무작위로 섞고 숫자 출력
let selectNum = [];
for(let i = 1; i < 8; i++){ // 보너스 숫자까지 해야하니 7개가 나와야함
let number = Math.floor(Math.random() * numbers.length);
let randomNum = numbers.splice(number, 1);
selectNum.push(randomNum);
}
console.log(selectNum);
숫자가 잘 출력 되는 것을 확인 할 수있다.
const bonusNum = selectNum.splice(6, 1); // 보너스 숫자
const winNums = selectNum.sort((a ,b) => a-b); // 당첨 숫자🔍 1초마다 숫자들 출력하기
for(let i = 0; i < winNums.length; i++){
setTimeout(() => {
console.log(winNums[i]);
}, 1000));
}❗️ 원래 1초마다 당첨 숫자들이 나오도록 했는데, 이렇게 하니 콘솔창에서 1초가 지나서 당첨 숫자 6개가 모두 출력이 되었다 왜일까 ?❗️
저 setTimeout(() => {}, 시간) 의 의미는 저 시간이 지나면 안에 콜백함수가 실행된다는 의미이다. 원래는 한번에 출력이 되는거지만, 저 시간에도 i+1 을 해주어야1초마다 출력이 되는것처럼 보인다.
for(let i = 0; i < winNums.length; i++){
setTimeout(() => {
console.log(winNums[i]);
}, 1000 * (i +1));
}🔍 브라우저 창에 당첨 숫자 공 보이게 하기
// 당첨 숫자 6개
for(let i = 0; i < winNums.length; i++){
setTimeout(() => {
const ball = document.createElement('div');
ball.className = 'ball';
ball.textContent = winNums[i];
result.append(ball);
}, 1000 * (i +1));
}
// 보너스 숫자 1개
setTimeout(() => {
const bonusBall = document.createElement('div');
bonusBall.className = 'ball';
bonusBall.textContent = bonusNum;
bonus.append(bonusBall);
}, 7000);
숫자들이 잘 나오는것을 확인할 수 있다.
🔍 전체 코드
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>로또추첨기</title>
<style>
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="result">추첨 결과는? </div>
<div id="bonus">보너스: </div>
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
const result = document.querySelector("#result");
const bonus = document.querySelector("#bonus");
const numbers = new Array(45).fill().map((a, i) => i + 1);
let selectNum = [];
// 번호 무작위 출력
for (let i = 1; i < 8; i++) {
let number = Math.floor(Math.random() * numbers.length);
let randomNum = numbers.splice(number, 1);
selectNum.push(randomNum);
}
const bonusNum = selectNum.splice(6, 1); // 보너스 숫자
const winNums = selectNum.sort((a, b) => a - b); // 당첨 숫자
for (let i = 0; i < winNums.length; i++) {
setTimeout(() => {
const ball = document.createElement('div');
ball.className = 'ball';
ball.textContent = winNums[i];
result.append(ball);
}, 1000 * (i + 1));
}
setTimeout(() => {
const bonusBall = document.createElement('div');
bonusBall.className = 'ball';
bonusBall.textContent = bonusNum;
bonus.append(bonusBall);
}, 7000);
});
</script>
https://brgndy.me/ 로 옮기는 중입니다 :)