DAY05.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">
	<title>로또 추첨기</title>
    <link href="lotto.css" rel="stylesheet">
</head>
	<body>
    <header>
        <h2 class="title">로또 추첨기</h2>
    </header>
    <div class="content">
        <div class="rottoNum_wrap">
            <div class="ball" id="num1"><span>?</span></div>
            <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>
            <div class="btn_wrap">
            <input class="btn" type="button" value="추첨하기" onclick="getNum()">
            </div>
        </div>
    </div>

    <script>
        function getNum(){


    let ball = document.getElementsByClassName('.ball'); //class이름이 ball인 요소 가져오기
    //추첨 후에, 또 추첨하기 버튼을 누르면 이전에 들어간 번호가 남아있어
    //초기화 해주기 위한 부분 :for문 돌리며 ball 안의 텍스트 ?로 넣기
    for(let i = 0; i < ball.length; i++) {
        ball[i].innerHTML = '<span>?<span>';
    }

    

    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(function(){
            ball.innerHTML = `<span>${rottoNum[i]}</span>`;
        }, i*1000);
    }
    



    //추첨된 번호가 중복됐을 시, 재추첨하기

   //공영역에 번호 나타내기
    }

</script>
	</body>
</html>