JS 로또추첨기

2021-09-17

로또 추첨기 구현하기.

Array: 너무 많은 num가 배열에 있을 때 빈값(emtpy이 그 갯수만큼 생성된다. empty는 반복문 불가하다.
for문은 자신이 몇번 돌지 확실할 때 / while문은 얼마나 돌아야 할지 모를 때, 기준값이 변동될 때 사용.
sort: 정렬. ex) array.sort()
(function(p, c) {return p - c;}) : 뺀 num가 0보다 크면 순서를 바꿈

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>로또</title>
    <style>
        .공 {
            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>당첨 num</div>
<div id="result"></div>
<div>보너스!</div>
<div class="bonus"></div>
<script src="lottery.js"></script>
</body>
</html>


// 후보군 num 삽입
// 좋은 방법은 아님

// var lotteryNum = Array(45);
// var fill = lotteryNum.fill();
// fill.forEach(function(argument, index) {
//     fill[index] = index + 1;
// });

var lotteryNum = Array(45)
.fill()
.map(function(argument, index) {
    return index + 1;
});

var shuffle = [];
while (lotteryNum.length > 0) {
    var moveNum = lotteryNum.splice(Math.floor(Math.random() * lotteryNum.length), 1)[0];
    shuffle.push(moveNum);
}

var bonus = shuffle[shuffle.length - 1];
var winNum = shuffle.slice(0, 6);
// var result = document.getElementById('result');
var result = document.querySelector('#sresult');

console.log('winNum', winNum.sort(function(p, c) {return p - c;}), '보너스', bonus);


function fillColor(num, space) {
    var ball = document.createElement('div');
    ball.textContent = num;
    ball.className = 'ball' + num; // 클래스 네임 주기
    ball.style.display = 'inline-block';
    ball.style.border = '1px solid black';
    ball.style.borderRadius = '10px';
    ball.style.width = '20px';
    ball.style.height = '20px';
    ball.style.textAlign = 'center';
    ball.style.marginRight = '10px';
    ball.style.fontSize = '12px';
    var backgroundColor;
    if (num <= 10) {
        backgroundColor = 'red';
    } else if (num <= 20) {
        backgroundColor = 'orange';
    } else if (num <= 30) {
        backgroundColor = 'yellow';
    } else if (num <= 40) {
        backgroundColor = 'blue';
    } else {
        backgroundColor = 'green';
    }
    ball.style.background = backgroundColor;
    space.appendChild(ball);
}

setTimeout(function lateNum(){
    fillColor(winNum[0], result);
}, 1000);

setTimeout(function lateNum(){
    fillColor(winNum[1], result);
}, 2000);

setTimeout(function lateNum(){
    fillColor(winNum[2], result);
}, 3000);

setTimeout(function lateNum(){
    fillColor(winNum[3], result);
}, 4000);

setTimeout(function lateNum(){
    fillColor(winNum[4], result);
}, 5000);

setTimeout(function lateNum(){
    fillColor(winNum[5], result);
}, 6000);

setTimeout(function lateNum(){
    // var bonusSpace = document.getElementsByClassName('bonus')[0];
    var bonusSpace = document.querySelector('.bonus')[0];
    fillColor(bonus, bonusSpace);
}, 7000);

REFERENCE
https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C/lecture/17186