[자바스크립트] 복권 추첨

kim seung chan·2021년 3월 20일

Array(number)CSS JavaScript Map Toyproject fill html setTimeout

복권 추첨을 다양한 메소드와 자바스크립트를 통한 css로 디자인을 하였다.

1. html 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="추첨번호"></div>
        <div id="보너스숫자"></div>
        <script src="로또추첨기.js"></script>
    </body>

html 코드는 간단하게 구성하였고 필요한 코드들은 자바스크립트로 구성하였다.

2. Array & fill 의 활용과 slice 배열 자르기

var 후보군 = Array(45).fill().map(function(a, index){
    return index+1;
});

var 셔플 = [];

while(후보군.length>0){
    var 랜덤 = 후보군.splice(Math.floor(Math.random()*후보군.length),1)[0];
    셔플.push(랜덤);
}

var 픽 = 셔플.slice(0,6).sort(function(a,b){return a-b});
var 보너스 = 셔플[셔플.length-1];

var 추첨번호 = document.querySelector("#추첨번호");
var 보너스숫자 = document.querySelector("#보너스숫자");

후보군에 Array 메소드를 통해 빈 배열 45개를 empty을 만들어 주었다. 그 후 fill 메소드를 통해 undefined를 통해 값을 저장 할 수 있게 칸들을 채워 주었고 Math 메소드를 통해 랜덤으로 45개의 후보군을 splice 메소드를 통해 하나씩 추출 하였고 Push을 통해 정렬 하였다.

픽 변수는 셔플의 slice에서 값을 6개 추출하였고 sort을 통해 숫자 크기로 정렬 하였다. 그후 html 태그들을 불러오기 위해 querySelector을 사용하였다.

3. function 기능구현

function 공색깔(추첨칸){

    추첨칸.style.display = 'inline-Block';
    추첨칸.style.border = '1px solid black';
    추첨칸.style.borderRadius = '30px';
    추첨칸.style.width = '30px';
    추첨칸.style.height = '30px';  
    추첨칸.style.textAlign = 'center';
    추첨칸.style.margin = '10px';
    추첨칸.style.color = 'black';

    if(추첨칸.textContent<=10){
        추첨칸.style.backgroundColor = 'yellow';
    }
    else if(추첨칸.textContent<=20){
        추첨칸.style.backgroundColor = 'blue';
    }
    else if(추첨칸.textContent<=30){
        추첨칸.style.backgroundColor = 'red';
    }
    else if(추첨칸.textContent<=40){
        추첨칸.style.backgroundColor = 'orange';
    }
    else if(추첨칸.textContent<=45){
        추첨칸.style.backgroundColor = 'green';
    }
};

함수에 css 코드들을 style을 통해 구성하였고 공들을 if문을 통해 숫자마다 색깔을 부여하였다. 함수를 쓴 이유는 중복 코드가 많아서이다. (추첨칸)을 사용한 이유는 보너스칸이 있기 때문이다.

4. setTimeout 요소를 통한 재미부여

setTimeout(function callback(){
   공옵션(0);
}, 1000);

setTimeout(function callback(){
    공옵션(1);
}, 2000);

setTimeout(function callback(){
    공옵션(2);
}, 3000);

setTimeout(function callback(){
    공옵션(3);
}, 4000);

setTimeout(function callback(){
    공옵션(4);
}, 5000);

setTimeout(function callback(){
    공옵션(5);
}, 6000);

setTimeout(function callback(){
    var 보너스멘트 = document.createElement("div");
    보너스멘트.textContent = '보너스 숫자입니다.'
    보너스숫자.appendChild(보너스멘트);
    var 보너스칸 = document.createElement("div");
    보너스칸.textContent = 보너스;
    보너스숫자.appendChild(보너스칸);
    공색깔(보너스칸);
    
}, 7000);

setTimeout을 부여한 이유는 공들이 1초마다 새로운 숫자를 나오기 하여 함수를 사용하였다. 1000이 의미하는 것은 1초이다.

보너스칸은 따로 숫자를 부여해야기 때문에 따로 구성하였다.

5. 전체코드

var 후보군 = Array(45).fill().map(function(a, index){
    return index+1;
});

var 셔플 = [];

while(후보군.length>0){
    var 랜덤 = 후보군.splice(Math.floor(Math.random()*후보군.length),1)[0];
    셔플.push(랜덤);
}

var 픽 = 셔플.slice(0,6).sort(function(a,b){return a-b});
var 보너스 = 셔플[셔플.length-1];

var 추첨번호 = document.querySelector("#추첨번호");
var 보너스숫자 = document.querySelector("#보너스숫자");

function 공옵션(숫자){
    var 추첨칸 = document.createElement("div");
    추첨칸.textContent = 픽[숫자];
    추첨번호.appendChild(추첨칸);
    공색깔(추첨칸);
};

function 공색깔(추첨칸){

    추첨칸.style.display = 'inline-Block';
    추첨칸.style.border = '1px solid black';
    추첨칸.style.borderRadius = '30px';
    추첨칸.style.width = '30px';
    추첨칸.style.height = '30px';  
    추첨칸.style.textAlign = 'center';
    추첨칸.style.margin = '10px';
    추첨칸.style.color = 'black';

    if(추첨칸.textContent<=10){
        추첨칸.style.backgroundColor = 'yellow';
    }
    else if(추첨칸.textContent<=20){
        추첨칸.style.backgroundColor = 'blue';
    }
    else if(추첨칸.textContent<=30){
        추첨칸.style.backgroundColor = 'red';
    }
    else if(추첨칸.textContent<=40){
        추첨칸.style.backgroundColor = 'orange';
    }
    else if(추첨칸.textContent<=45){
        추첨칸.style.backgroundColor = 'green';
    }
};



setTimeout(function callback(){
   공옵션(0);
}, 1000);

setTimeout(function callback(){
    공옵션(1);
}, 2000);

setTimeout(function callback(){
    공옵션(2);
}, 3000);

setTimeout(function callback(){
    공옵션(3);
}, 4000);

setTimeout(function callback(){
    공옵션(4);
}, 5000);

setTimeout(function callback(){
    공옵션(5);
}, 6000);

setTimeout(function callback(){
    var 보너스멘트 = document.createElement("div");
    보너스멘트.textContent = '보너스 숫자입니다.'
    보너스숫자.appendChild(보너스멘트);
    var 보너스칸 = document.createElement("div");
    보너스칸.textContent = 보너스;
    보너스숫자.appendChild(보너스칸);
    공색깔(보너스칸);
    
}, 7000);

6. 부족한 부분

보너스칸을 함수로 구성할 수 있었지만 부족한 부분이 있었다.
setTimeout 함수도 클로저로 구성할 수 있었지만 기술적 요소가 부족하였다.

kim seung chan

이전 포스트

[자바스크립트] slice & sort

다음 포스트