JQuery 로또 번호 - jQuery lotto beonho

Question

목차 Show

종다이의 한걸음 한걸음씩
[JavaScript & Jquery] 로또 추첨기 만들기
로또 추첨기
로또 추첨기 심화

종다이의 한걸음 한걸음씩

개발/프론트엔드

[JavaScript & Jquery] 로또 추첨기 만들기

종다이 2021. 4. 14. 21:28

로또 추첨기

1~45의 숫자 중 6개의 숫자를 램덤으로 받아 숫자 출력

<!DOCTYPE html>
<html>
<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 href="lotto.css" rel = "stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
    crossorigin="anonymous"></script>
    <title>심플한 로또 추첨 프로그램</title>
</head>
<body>
    <h2>로또 추첨</h2>
    <div class="main">
        <div class="result"></div>
        <button>추첨</button>
    </div>
    <script src ="lotto.js"></script>
</body>
</html>

<!--
    호스팅 서비스:
    인터넷 세상에 자리를 내주어 홈페이지를 다른 사람들도 볼 수 있게 해주는 것!
-->

h2{
    font-size: 48px;
}
.main{
    display: flex;
    align-items: center;
}
button{
    font-size: 36px; width: 120px;
    height: 140px; margin-left: 20px; color: white;
    background-color: teal; border: none;
    border-radius: 10px;
}
button:active, button:focus{
    outline: none;
}
/* 추첨된 번호 여섯개가 보이는 영역 */
.result{
 display: flex; width: 770px; height: 140px;
 padding: 20px; box-sizing: border-box;
 border: 1px solid black; border-radius:  10px;
}
/* .result 안에 들어간 번호(당구공) 하나하나 */
.result > div{
    display: flex; justify-content: center; align-items: center;
    width: 100px; height: 100px; margin: 0 10px;
    border-radius: 50%; font-size: 36px; color: white;
    font-weight: 900;
}

// 주어진 정수의 값에 따라서 다른 색깔을 반환하자
function getColor(number){
    let color = "orange"; // 10 미만
    if(number >=10 && number < 20){
        color = "green"
    }else if(number >=20 && number < 30){
        color = "blue"
    }else if(number >=30 && number < 40){
        color = "red"
    }else if(number >=40 && number < 50){
        color = "purple"
    }
    return color;
}
// 숫자 여섯개 당구공을 생성하여 문서에 뿌려준다!
function displayNumbers(lotto){
    // 원래 보이던 당구공들은 제거하고 시작!
    $(".result").empty();
    for(let i =0; i < 6; i++){
        const div = $("<div></div>") // 제이쿼리판 createElement
        $(div).text(`${lotto[i]}`)
        $(div).hide(); // 안 보이는 상태에서 추가하기
        $(div).css("background-color", getColor(lotto[i]))
        $(".result").append(div)
    }
    $(".result > div").fadeIn(1000); // 1초 동안 스르륵 등장!
}
// 1부터 45 사이의 숫자 중 여섯개로 골라줘라!(무작위로)
function createNumbers(){
    const lottoNumbers = []
    // 로또번호 여섯개가 다 안뽑혔다면 게속해라!
    while(lottoNumbers.length < 6){
        const randomNumber = Math.floor(Math.random() *45) + 1
       // 배열.indexOf(x) : x가 배열의 몇번 인덱스에 있는지 알려준다! 단, 없다면 -1을 반환
        if(lottoNumbers.indexOf(randomNumber) === -1){ 
           lottoNumbers.push(randomNumber)
       }
    }
    displayNumbers(lottoNumbers)
}
$(document).ready(function(){
    // 버튼을 눌렀을 때 번호가 추첨되도록 이벤트 등록
    $("button").click(function(){
       createNumbers()
    })
})

로또 추첨기 심화

1~45의 번호판을 만들어 추첨 과정중 선택된 숫자를 체크

그리고 번호 출력

<!DOCTYPE html>
<html>
<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 href="lotto.css" rel = "stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
    crossorigin="anonymous"></script>
    <title>로또 번호 추첨</title>
</head>
<body>
    <div id ="container">
        <header>
            <h2>로또 번호 생성</h2>
        </header>
        <section>
            <!-- JS로 숫자를 생성하여 숫자판 채우자 -->
            <div class="js-numbers"></div>
            <button class="js-btn">추첨하기</button>
            <p class="ing visible">생성중..</p>
            <div class="result"></div>
            <button class="js-reset">초기화</button>
        </section>
        <footer>
            
            <h3></h3>
        </footer>
    </div>  
    <script src="lotto.js"></script>
</body>
</html>

@font-face {
    font-family: 'CookieRun-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu//CookieRun-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*{font-family: 'CookieRun-Regular';}
html, body{
    margin: 0;
    background-color: #eeeeee;
}
#container{
    width: 350px; margin: 0 auto;
    text-align: center;
}
header > h2{
 font-size: 48px; margin: 16px 0; color: orange;
}
footer > h3{
    border-top: 1px solid gray; padding-top: 10px; 
}
/* 번호판 */
.js-numbers{
    width: 350px; margin: 0 auto;
    display: flex;
    /* 자식 요소가 많아져 overflow 됐을 때, 내용을 줄바꿈으로 조치해준다 */
    flex-wrap: wrap;
}
.js-numbers > div{
    width: 50px; height: 36px; margin: 5px;
    padding: 5px; text-align: center;
}
.js-numbers > div > p{
    margin: 0; line-height: 40px;
    border: 1px solid gray; border-radius: 8px;
    color: black;background-color: white;
}
/* 번호판 밑에 요소들*/
.js-btn{
    margin-top: 18px;
    width: 120px;
    height: 50px;
    font-size: 18px;
    color: white;
    background-color: orange;
    border: none; border-radius: 9px;;    
}
/* '생성중..' 이라는 텍스트의 표시 여부 */
.ing{ visibility: hidden;}
.visible{ visibility: visible;}
/* 리셋할 필요가 있을 때만 보여주면 되는 버튼 */
.js-reset{
    display: none;
    width: 60px;
    height: 20px;
    color: white;
    background-color: orangered;
    border: none; border-radius: 6px;    
}
.js-btn:active, js-btn:focus{
    outline: none;
}
/* 추첨 결과에 대한 스타일들 */
/*
일반적인 흐름을 무시하고, 선택자 특성상 우선순위가 겹쳐버리거나 밀려버리는 경우,
강제 스타일 지정을 할 수 있다.
이때는 important 키워들를 사용한다
*/
.selected > p{
    color : white !important;
    background-color: orange !important;
}
/* 결과 스타일링하기 */
.dNumbers{
    display: flex; justify-content: center;
    border: 1px solid gray; border-radius: 12px;
    background-color: white;
    margin-bottom: 5px;
}
.dNumber{
    display: flex; justify-content: center; align-items: center;
    width: 32px; height: 32px; font-size: 22px;
    border-radius: 50%; color : white;
    background-color: orange; 
    margin: 10px;
}

// 로또 번호를 관라하는데 필요한 변수들!
const lotto = [] // 추첨된 번호 보관할 배열
let isCreate = false; // 추첨 중이냐 아니냐
let step = 0; // 여섯개를 표시했나 체크하는 변수
let intervalId = 0; //  주기적 동작의 id 백업하기
const createComment = ["생성중..","생성중...","생성중."]
const colors = ["red","green","orange","purple","yellow"]
const colors02 = ["red","green","orange","purple","yellow","linm","black","blue"]
// 제목 색 바꾸기
function titlecolor(){

    const titlenumber = Math.floor(Math.random()*8)
    
    $("h2").css("color",colors02[titlenumber])
   
}
// 리셋 버튼 누르면 추첨 결과 싹 사라져!
function resetNumbers(){
    $(".selected").removeClass("selected") // 색칠 없애기
    $(".result").empty()// 추첨 결과 없애기
    $(".js-reset").hide() // 리셋 버튼 숨기기
}
// 추첨 결과를 추가하자
function displayNumebrs(){
    const numberContainer = $('<div class="dNumbers"></div>') // 여섯개를 모아놓은 영역
    for(let i =0; i < 6; i++){
        const number = $("<div class='dNumber'></div>")
        number.text(`${lotto[i]}`)
        //number.css("background-color",colorchange(lotto[i]))
        number.css("background-color", colors[parseInt(lotto[i]/10)])
        numberContainer.append(number)
    }
    numberContainer.css("display", "none") // 안보이게
    $(".result").append(numberContainer) // 그리고 추가
    numberContainer.fadeIn(1200) // 추가되었으니 스르륵 나타나라
    $(".js-reset").show() // 추첨 결과가 하나 이상 있으니 초기화 버튼 생성
}
// 추첨된 번호를 웹문서에 표시하자
function pointNumbers(){
     $(`#no-${lotto[step]}`).addClass('selected')
     $(".ing").text(createComment[step % 3]) //생성중... 표시하기 위한 배열 인덱싱
   step++;
   if(step == 6){
       clearInterval(intervalId) // 인터벌 동작 id 불러와서 제거!
       step = 0;
       isCreate = false;
       $(".ing").removeClass("visible") // '생성중' 생성 그만
       displayNumebrs(); // 결과 보기
    }
}
// 번호 여섯개를 추첨하자
function createLottoNumbers(){

    // 추첨 하는 중이면 못하게 하기
    if(isCreate){
        return; // 생성중이면 함수 강제 종료!
    }
    isCreate = true; // 생성 안하고 있으면 실행
    lotto.splice(0,6) // 로또 배열 비운다.(몇번 인덱스부터 몇개 지운다)
    $(".selected").removeClass("selected") //선택되어있던 요소들 초기화!
    while(lotto.length < 6){
        const num = Math.floor(Math.random()*45) + 1
        if(lotto.indexOf(num) === -1){
            lotto.push(num)
        }
    }
    console.log(lotto)

    $(".ing").addClass("visible") // '생성줃' 보이기 시작
    // pointNumbers를 주기적으로 호출한다
    // 셋인터벌은 0이 아닌 정수를 반환한다!    
    intervalId = setInterval(pointNumbers, 300) // 동작하면 inervalId 로 값 반환
}
// 45개의 번호를 표시하자
function createWholeNumbers(){
    for(let i =1; i <= 45; i++){
        const numDiv = $(`<div id="no-${i}"></div>`)
        numDiv.html(`<p class="number">${i}</p>`)
        $(".js-numbers").append(numDiv)
    }
}
function mouse(){
    $(".js-btn").mouseenter(function(){
        $(this).css("background-color", "gray")
    })
    $(".js-btn").mouseleave(function(){
        $(this).css("background-color", "orange")
    })
    $(".js-reset").mouseenter(function(){
        $(this).css("background-color", "gray")
    })
    $(".js-reset").mouseleave(function(){
        $(this).css("background-color", "orangered")
    })
}
function Init(){
    mouse();
    setInterval(titlecolor, 1000)
    createWholeNumbers(); // 번호판 만들기
    $(".ing").removeClass("visible") // '생성중' 처음에 안보이게
    $(".js-btn").click(createLottoNumbers)
    $(".js-reset").click(function(){
        resetNumbers()
    })
}
$(document).ready(function(){
    Init(); // 초기 UI 세팅, 이벤트 등록
})
// penguingoon.tistory.com/260

HTML 랜덤 뽑기