Javascript

09.Javascript 로또번호 추출기 예제

프론트개미 2022. 3. 4. 16:27

숫자를 랜덤으로 가지고 올 수 있는 Math.random( ); 을 이용한 예제입니다.

 

- html

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>로또번호추첨기</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="ex02.js"></script>
</head>
<body>
    <div id="lotto">
        <div id="num1"></div>
        <div id="num2"></div>
        <div id="num3"></div>
        <div id="num4"></div>
        <div id="num5"></div>
        <div id="num6"></div>
        <div id="plus">+</div>
        <div id="bonus"></div>
    </div>
    <button type="button" id="btn">행운번호 추첨</button>
</body>
</html>

 

 

- css

#lotto{
    width:1920px;
    position:relative;
    margin:0 auto;
}

#lotto div{
    border:2px solid #aaa;
    width:100px;
    height:100px;
    float:left;
    margin-top:50px;
    margin-left:30px;
    text-align: center;
    line-height:100px;
    font-size:30px;
    border-radius:5px;
}

#lotto #plus{
    border:none;
    font-size:40px;
}

#lotto #bonus{
    color:rgb(32, 118, 255);
    border:2px solid rgb(32, 118, 255);
    margin-left:30px;
}

#btn{
    clear:both;
    float:left;
    border:2px solid rgb(32, 118, 255);
    background:none;
    width:200px;
    height:50px;
    font-size:16px;
    margin-top:50px;
    margin-left:30px;
    cursor: pointer;
    border-radius:5px;
    color:rgb(32, 118, 255);
    font-weight: 600;
}

#btn:hover{
    background:rgb(32, 118, 255);
    color:#fff;
    border:none;
}

 

 

이렇게 입력을 하면 출력되는 화면입니다.

실제 로또번호 추출기처럼 보너스 번호까지 구현이 되도록 제작을 했습니다.

 

화면의 행운번호 추첨이라는 버튼을 클릭하면 1 ~ 45 까지의 숫자가 랜덤으로 출력되는 것이 이 예제의 기획입니다.

 

function random1(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num1').innerHTML = randomNum;
}

숫자를 랜덤으로 추출하기 위해서 Math.random( );을 사용하였습니다.

Math.random( );은 0.00 ~ 1.00 까지의 숫자를 소수점으로 랜덤으로 추출하기 때문에 45까지의 숫자를 구현하기 위해서 * 45를 해줬고, 0부터 시작하기 때문에 + 1 을 더해줬습니다.

 

랜덤으로 나온 값이 정수의 값으로 불러오게 하기 위해서 Math.floor( );로 감싸줍니다.

 

첫 번째 숫자가 나와야 할 네모박스 안에 추출된 숫자를 넣어주기 위해서 num1에 randomNum이란 변수를 적용합니다.

 

function random1(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num1').innerHTML = randomNum;
}

function random2(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num2').innerHTML = randomNum;
}

function random3(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num3').innerHTML = randomNum;
}

function random4(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num4').innerHTML = randomNum;
}

function random5(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num5').innerHTML = randomNum;
}

function random6(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num6').innerHTML = randomNum;
}

function random7(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('bonus').innerHTML = randomNum;
}

그리고 7번째 숫자까지 랜덤으로 숫자가 추출되게 적용합니다.

 

function btnClick(){
    random1();
    random2();
    random3();
    random4();
    random5();
    random6();
    random7();
};

const btn = document.getElementById('btn');

btn.addEventListener('click',btnClick);

마지막으로 랜덤 숫자가 추출되는 함수들을 btnClick( );이라는 함수를 만들어 넣어준 다음 addEventListener을 이용해

버튼을 click했을 때 랜덤 숫자가 추출되어 화면에 표시되게 구현했습니다. 

 

 

- javascript

'use strict';


function random1(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num1').innerHTML = randomNum;
}

function random2(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num2').innerHTML = randomNum;
}

function random3(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num3').innerHTML = randomNum;
}

function random4(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num4').innerHTML = randomNum;
}

function random5(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num5').innerHTML = randomNum;
}

function random6(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('num6').innerHTML = randomNum;
}

function random7(){
    const randomNum = Math.floor(Math.random() * 45 + 1);
    document.getElementById('bonus').innerHTML = randomNum;
}

function btnClick(){
    random1();
    random2();
    random3();
    random4();
    random5();
    random6();
    random7();
};

const btn = document.getElementById('btn');

btn.addEventListener('click',btnClick);