[javascript] 로또 번호 6개 무작위 추출하기

자바스크립트를 이용하여 로또 번호 추출하기

 

자바스크립트를 이용하여 1부터 45까지의 숫자를 무작위로 추출해주는 스크립트를 만들어 보았습니다.  

 

완성화면

 

 

✈. HTML

    <div id="wrap">
        <div class="container">
            <h1>LOTTO</h1> 
            <p>LUCKY NUMBERS COMING</p>
            <button>CLICK</button>
            <div class="number"></div>


        </div>
    </div>

✈. CSS

    *{
        margin: 0;
        padding: 0;
    }
    #wrap {
        width: 100%;
        height: 100vh;
        background-color: #d6d7d3;
        padding-top: 100px;

    }
    .container {
        margin: 0 auto;
        border : dotted 10px #c4a43f;
        width: 1000px;
        height: 280px;
        text-align: center;
    }
    h1 {
        
        font-size: 50px;
        font-weight: bold;
        color: #ce0919;
        font-family: 'TheJamsil5Bold';
        padding-top: 30px;
        letter-spacing: 10px;
    }
    p {
        font-family: 'TheJamsil5Bold';
        font-size: 24px;
        font-weight: bold;
        color: #105bb9;
        padding: 10px 0;
    }
    button { 
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }
    .number {
        
        width: 300px; 
        height: 40px;
        border: solid 2px #333;
        border-radius: 50px; 
        font-size: 22px;
        font-weight: bold;
        letter-spacing: 5px;
        background-color: #fff;
        line-height: 35px;
        margin: 10px auto;
    }

✈. SCRIPT

        const button = document.querySelector("button");
        const number = document.querySelector(".number");
    
        function randomNumber(){
            let randomLotto = new Set();
    
            for(let i=1; i<=6; i++){
                randomLotto.add(Math.floor(Math.random() * 45) + 1);
            }
            number.innerText = [...randomLotto];
         }
         button.addEventListener("click", randomNumber);

 

🏁. Set()

	set객체는 중복되지 않은 유일한 값들의 집합이다
특징	01. 동일한 값을 중복하여 포함할 수 없다. 02. 요소 순서에 의미가 없다. 03. 인덱스로 요소에 접근 할 수 없다.
	수학적 집합을 구현하기 위한 자료구조이다. 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.