로또번호 생성 웹사이트 무료로 만들기 5

이번 글에서는 저번글에 이어서 mainpage를 완성해보도록 하겠다.

mainpage는 자동번호 받기 페이지로 만들 예정이다.

자동번호 받기 틀을 만들기 위해 우리는 오픈소스를 이용할 것이다.

https://www.csscodelab.com/css-select-box-drop-down-item-hover-effect/

CSS Select Box Drop Down Item Hover Effect - CSS CodeLab

이 사이트에서 우리는 Select Box Drop Down Item을 가져올 것이다.

아무리 HTML과 Javascript를 잘해도 CSS가 부족하면 사용자들이 홈페이지에 대한 좋은 시선을 가질 수 없다.

우선 위 사이트에서 CSS를 저장하여 select.css로 저장하고 link로 불러오도록 하자.

<link rel="stylesheet" type="text/css" href="select.css">

그 다음 우리는 위 사이트의 HTML코드를 수정하여 우리의 index.html에 넣을 것이다.

<form id="app-cover">
                <div id="select-box">
                        <input type="checkbox" id="options-view-button">
                        <div id="select-button" class="brd">
                                <div id="selected-value">
                                    <span>로또 번호 받을 개수</span>
                                </div>
                        </div>
                        <div id="options">
                                <div class="option" id="option5">
                                        <input class="s-c top" type="radio" name="platform" value="five">
                                        <input class="s-c bottom" type="radio" name="platform" value="five">
                                        <span class="label">5개</span>
                                        <span class="opt-val">5</span>
                                </div>
                                <div class="option" id="option10">
                                        <input class="s-c top" type="radio" name="platform" value="ten">
                                        <input class="s-c bottom" type="radio" name="platform" value="ten">
                                        <span class="label">10개</span>
                                        <span class="opt-val">10</span>
                                </div>
                                <div class="option" id="option15">
                                        <input class="s-c top" type="radio" name="platform" value="fifteen">
                                        <input class="s-c bottom" type="radio" name="platform" value="fifteen">
                                        <span class="label">15개</span>
                                        <span class="opt-val">15</span>
                                </div>
                                <div class="option" id="option20">
                                        <input class="s-c top" type="radio" name="platform" value="twenty">
                                        <input class="s-c bottom" type="radio" name="platform" value="twenty">
                                        <span class="label">20개</span>
                                        <span class="opt-val">20</span>
                                </div>
                                <div id="option-bg"></div>
                        </div>
                </div>
</form>

이를 넣고 웹사이트를 실행시키면 다음과 같이 나온다.

클릭하면 5개 10개 15개 20개를 선택할 수 있게 나온다.

우리는 클릭하면 저 form을 지워줘야한다. 따라서 다음과 같이 javascript를 작성한다.

$(document).ready(function(){
                $('#option1').click(function(){ 
                    $("#app-cover").hide();
                    adddiv(1);
                });
                $('#option5').click(function(){ 
                    $("#app-cover").hide(); 
                    adddiv(5);
                });
                $('#option10').click(function(){ 
                    $("#app-cover").hide(); 
                    adddiv(10);
                });
                $('#option15').click(function(){ 
                    $("#app-cover").hide(); 
                    adddiv(15);
                });
                $('#option20').click(function(){ 
                    $("#app-cover").hide(); 
                    adddiv(20);
                    
                });
        });

adppdiv는 저번 글에서 만든 당첨번호 틀을 추가시켜주는 것이다.

매개변수의 숫자만큼 틀을 생성해준다.

생성해주는 소스는 다음과 같다.

async function adddiv(j){
            for(i=0;i<j;i++)
            {   
                await milli();
                lottoarray = randomlottoNumber();
                $('#div').append($('<div class="numberdiv"><div class="top-div"><div class="top-div-name">'+(i+1)+'번째 오늘의번호(자동)</div></div><div class="numberset"><div class="lottocircle"><p class="value">'+lottoarray[0]+'</p></div><div class="lottocircle"><p class="value">'+lottoarray[1]+'</p></div><div class="lottocircle"><p class="value">'+lottoarray[2]+'</p></div><div class="lottocircle"><p class="value">'+lottoarray[3]+'</p></div><div class="lottocircle"><p class="value">'+lottoarray[4]+'</p></div><div class="lottocircle"><p class="value">'+lottoarray[5]+'</p></div></div></div>'));
                drawcolor();
            }
}

function 앞에 async가 붙었다 왜그럴까 async를 붙인 이유는 interval을 주기 위해서다

당첨번호 틀이 나올때 한번에 쭉나오는거보다 0.5초씩 interval을 줘서 나오는게 더 이쁘게 나오기 때문이다.

function milli() {
            return new Promise(resolve => {
                setTimeout(() => {
                resolve('resolved');
                }, 500);
            });
}

 이는 0.5초 interval을 주는 milli function이다.

그 다음으로 lottoarry는 randomlottonumber 함수를 통해서 얻어온다.

javascript를 이용해서 로또 랜덤 숫자를 출력하는 함수는 다음과 같다.

function randomlottoNumber () {
            var lotto = [];
            var cnt = 0;
            var flag = true;
            while (cnt < 6) {
                var number = 0; 
                number = parseInt(Math.random() * 45) + 1; 
                for (var i = 0; i < cnt; i++) { 
                    if (lotto[i] == number) {
                        flag = false;
                    }
                }
                if (flag==true) { 
                    lotto[cnt] = number; 
                    cnt++;
                }
                flag = true; 
            }
            sort_lotto = lotto.sort(function (a,b){ return a-b; });
            return sort_lotto;
}

랜덤을 사용해서 1~45까지 숫자를 뽑으나, 중복될 경우 뽑지 않는 알고리즘이다.

마지막으로 drawcolor는 저번글에서 작성한 숫자에 대해 자바스크립트로 색깔을 바꿔주는 함수이다.

소스는 다음과 같다.

function drawcolor(){
            var number = document.getElementsByClassName("lottocircle");
            for (var i = 0 ; i < number.length ; i++) {
                if(parseInt(number[i].textContent)>=40){
                    number[i].style="background-color:#000";
                }else if(parseInt(number[i].textContent)>=30){
                    number[i].style="background-color:#ea4c89";
                }else if(parseInt(number[i].textContent)>=20){
                    number[i].style="background-color:#0057ff";
                }else if(parseInt(number[i].textContent)>=10){
                    number[i].style="background-color:#32c766"; 
                }   
                else{
                    number[i].style="background-color:#f48024";  
                } 
            }
}

소스를 다 넣고 웹페이지를 실행시킨 후, 10개의 랜덤번호를 뽑아보았다.

다음과 같이 잘 나온 것을 확인할 수 있다.

자동번호를 완성했으니, 다음글에서는 반자동번호로 로또번호 뽑는 것을 만들겠다.