본문 바로가기
프로그래밍/자바스크립트

17 로또 추첨 프로그램을 만들어보자

by 윤지(●'◡'●) 2021. 7. 30.
반응형

로또 추첨 프로그램을 만들어보자

 

이전에 이미 로또 추첨 프로그램을 만든적이 있지만, 네...(말잇못（；´д｀）ゞ)

 

https://yoonhihi.tistory.com/148?category=972019 

 

07 주사위게임, 가위바위보, 로또추첨 만들기

주사위 게임 주사위 게임 - 랜덤한 수를 뽑아 변수에 저장 - 자신이 입력한 수와 일치하면 끝나는 게임(틀리면 무한 반복) [출력 예시] 주사위 숫자를 맞춰보세요.(1~6) 3 틀렸습니다. 주사위 숫자

yoonhihi.tistory.com

 

처음에 만들 때 든 생각이 점점 더 멋있게 만들어보자! 였는데, 아직도 부족하지만 업그레이드된 버전으로

작성해보려한다. (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/rotto.css"> //css 연결
    <script src="/js/rotto.js"></script> //js 연결
    <title>로또 추첨기</title>
</head>
<body>
    <header>
        <h2 class="title">로또 추첨기</h2>
    </header>
    <div class="content">
        <div class="rottoNum_wrap"> // 로또공(?)이 들어갈 영역
            <div class="ball" id="num1"><span>?</span></div>
            //동일하게 동그란 모양을 만들기 위해 class로 ball 주기
            <div class="ball" id="num2"><span>?</span></div>
            <div class="ball" id="num3"><span>?</span></div>
            <div class="ball" id="num4"><span>?</span></div>
            <div class="ball" id="num5"><span>?</span></div>
            <div class="ball" id="num6"><span>?</span></div>
            <div class="plus">+</div>
            <div class="ball bonus" id="num7"><span>?</span></div>
            //보너스번호는 공의 색깔을 다르게 주기위해 bonus로 클래스명 주기
            <div class="btn_wrap"> // 버튼영역
            <input class ="btn" type="button" value="추첨하기" onclick="getNum()">
            // 클릭된다면 getNum() 함수가 실행되게 하기
            </div>
        </div>
    </div>
</html>

 

CSS

/*웹폰트*/
@font-face {
    font-family: 'IM_Hyemin-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IM_Hyemin-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    width: 100%;
    background-color: #eb9f9f;
    position: relative;
}

.title{
    font-family: 'IM_Hyemin-Bold';
    font-size: 50px;
    text-align: center; /*중앙에 위치하도록*/
    color: #fff;
}

.rottoNum_wrap{
    width: 1000px;
    height: 550px;
    background: url(/images/gui-2311258_1280.png) no-repeat; 
    /*백그라운드 이미지 넣기, no-repeat : 반복 x */
    background-size: 100%;
    margin: 0 auto;
    text-align: center; /*글자 중앙정렬*/
    position: relative; /*plus(+) 위치 조정을 위해 relative설정*/
}
.ball{
    border-radius: 100%; /*원형으로 만들기*/
    background-color: #f1bbba;
    width: 100px;
    height: 100px;
    display: inline-block; /*일자로 정렬하기 위해 적용*/
    margin: 150px 10px 150px;
    position: relative;
}
.ball span{ /*공안의 숫자 텍스트 부분 스타일적용*/
    display: block;
    font-family: 'IM_Hyemin-Regular';
    font-size: 40px;
    text-align: center;
    margin-top: 25px;
}
.bonus{ /*보너스공 스타일 적용*/
    margin-left: 50px;
    background-color: #aed8ff;
}
.rottoNum_wrap .plus{ /*플러스 텍스트 스타일 적용*/
    position: absolute;
    display: inline-block;
    font-family: 'IM_Hyemin-Regular';
    font-size: 50px;
    height: 100px;
    top: 160px;
}


.btn_wrap{
    width: 100%;
    margin: 0 auto;
}

.btn{ /*버튼 스타일 적용*/
    border: none;
    background-color: #a79c8e;
    color: white;
    font-family: 'IM_Hyemin-Regular';
    font-size: 20px;
    width: 150px;
    height: 40px;
    border-radius: 10px; /*모서리 둥글게*/
}
.btn:hover{ /*버튼 위에 마우스 올라갔을 때 스타일적용*/
    background-color: #8a8277;
    transition-duration:2s;
}

 

JS

function getNum(){
    let ball = document.getElementsByClassName("ball"); //class이름이 ball인 요소 가져오기
    //추첨 후에, 또 추첨하기 버튼을 누르면 이전에 들어간 번호가 남아있어
    //초기화 해주기 위한 부분
    for(let i = 0; i < ball.length ; i++){
        ball[i].innerHTML = '<span>?</span>'; //for문 돌리며 ball 안의 텍스트 ?로 넣기
	}
    let rottoNum = []; //추첨한 로또 번호를 담을 배열
    for(let i = 0; i < 7 ; i++){
        rottoNum[i] =  Math.floor(Math.random()*45)+1; //랜덤함수를 통해 랜덤으로 번호생성
        //추첨된 번호가 중복됐을 시, 재추첨하기
        for(let j = 0; j < i; j++){
            if(rottoNum[i] == rottoNum[j]){ 
                i--;
                break;
            }
        }
    }
	
    for(let i=0; i < rottoNum.length; i++){
        let ball = document.getElementById("num" + (i+1));
        // setTimeout()함수를 이용하여, 1초마다 실행되도록 함
        setTimeout(function(){
            ball.innerHTML = `<span>${rottoNum[i]}</span`;
        },i*1000);
    }
}

 

[결과]

로또 추첨 해보고 싶으신분은 아래 링크를 클릭해주세용

로또 추첨 하러 가기 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

 

 

 

 

 

>

아직도 코드가 복잡한 느낌이 있고, 엄청난 애니메이션 효과는 없어서 아쉽지만

이전보다 나은 결과물을 만든것처럼 다음번에 더 좋은 결과물로 작성하겠습니다:)

 

 

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>

반응형
저작자표시 비영리 변경금지

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

16 노드(node)  (0) 2021.07.09
15 문서객체모델(DOM)  (0) 2021.07.08
14 주민등록번호 유효성 체크 프로그램을 만들어 보자  (1) 2021.07.04
13 window 객체  (0) 2021.07.03

관련글

댓글

티스토리툴바