03_로또랜덤뽑기

Javascript

by 모모87 2021. 3. 13. 02:27

<body>
  <div class="jsmock_mid">
    <div class="script_img script_img3">
      <div class="script_desc3">
        <h1 class="lot-title">로또추첨 프로그램</h1>
        <button class="lot_btn active" onclick="lottoStart();">START</button>
        <div class="pick">
          <div class="num">당첨 숫자</div>
          <div class="winnum"></div>
          <div class="num">보너스!</div>
          <div class="bonus"></div>
        </div>
      </div>
    </div>
  </div>
</body>

//로또js
const lot_btn = document.querySelector('.lot_btn');
const pick = document.querySelector('.pick');

// //버튼 클릭시 함수실행

//     lot_btn.addEventListener('click',function(){
        
//         lot_btn.classList.remove('active');
//         pick.classList.add('active');
//         const candidate = Array(45).fill().map((v, i) => i + 1);
//         const shuffle = [];
//         while (candidate.length > 0) {
//         const random = Math.floor(Math.random() * candidate.length);
//         const spliceArray = candidate.splice(random, 1);
//         const value = spliceArray[0];
//         shuffle.push(value);
//         }
//         //오름차순 정렬
//         const winBalls = shuffle.slice(0, 6).sort((p, c) => p - c);

//         const bonus = shuffle[6];

//         //뽑힌 공의 숫자에 따라 색상 클래스 지정
//         function colorize(number, tag) {
//             if(number <= 10){
//                 tag.className += " yellow";
//             } else if (number <= 20) {
//                 tag.className += " blue";
//             } else if (number <= 30) {
//                 tag.className += " red";
//             } else if (number <= 40) {
//                 tag.className += " black";
//             } else {
//                 tag.className += " green";
//             }
//         }

//         //당첨번호
//         const resultTag = document.querySelector('.winnum');
//         for (let i = 0; i < 6; i++){
//         //비동기 처리
//         setTimeout(() => {
//             const ball = document.createElement('div');
//             ball.className = 'ball';
//             colorize(winBalls[i], ball);
//             ball.textContent = winBalls[i];
//             resultTag.appendChild(ball);
//         },500 * (i + 1));
//         }

//         //보너스번호
//         const bonusTag = document.querySelector('.bonus');
//         setTimeout(() => {
//             const bonusBall = document.createElement('div');
//             bonusBall.className = 'ball';
//             colorize(bonus, bonusBall);
//             bonusBall.textContent = bonus;
//             bonusTag.appendChild(bonusBall);
//         },3300);
        
//         //리셋버튼
//         setTimeout(() => {
//             const resetBtn = document.querySelector('input');
//             resetBtn.className = 'on';
//             pick.appendChild(resetBtn);
//         },3800);
        
//     });

function lottoStart(){
    lot_btn.classList.remove('active');
        pick.classList.add('active');
        const candidate = Array(45).fill().map((v, i) => i + 1);
        const shuffle = [];
        while (candidate.length > 0) {
        const random = Math.floor(Math.random() * candidate.length);
        const spliceArray = candidate.splice(random, 1);
        const value = spliceArray[0];
        shuffle.push(value);
        }
        //오름차순 정렬
        const winBalls = shuffle.slice(0, 6).sort((p, c) => p - c);

        const bonus = shuffle[6];

        //뽑힌 공의 숫자에 따라 색상 클래스 지정
        function colorize(number, tag) {
            if(number <= 10){
                tag.className += " yellow";
            } else if (number <= 20) {
                tag.className += " blue";
            } else if (number <= 30) {
                tag.className += " red";
            } else if (number <= 40) {
                tag.className += " black";
            } else {
                tag.className += " green";
            }
        }

        //당첨번호
        const resultTag = document.querySelector('.winnum');
        for (let i = 0; i < 6; i++){
        //비동기 처리
        setTimeout(() => {
            const ball = document.createElement('div');
            ball.className = 'ball';
            colorize(winBalls[i], ball);
            ball.textContent = winBalls[i];
            resultTag.appendChild(ball);
        },500 * (i + 1));
        }

        //보너스번호
        const bonusTag = document.querySelector('.bonus');
        setTimeout(() => {
            const bonusBall = document.createElement('div');
            bonusBall.className = 'ball';
            colorize(bonus, bonusBall);
            bonusBall.textContent = bonus;
            bonusTag.appendChild(bonusBall);
        },3300);
        
        //리셋버튼
        setTimeout(() => {
            const resetBtn = document.querySelector('input');
            resetBtn.className = 'on';
            pick.appendChild(resetBtn);
        },3800);
        
}
function lottoRestart(){
    
    const resultTag1 = document.querySelector('.winnum');
    const bonusTag1 = document.querySelector('.bonus');
    console.log(resultTag);
    console.log(bonusTag);

    resultTag1.className = 'hidden';
    bonusTag1.className = 'hidden';
    
    lottoStart();
   
}

'Javascript' 카테고리의 다른 글

05_키보드 드럼 (0)	2021.03.13
04_출석체크 (0)	2021.03.13
02_점심랜덤룰렛 (0)	2021.03.13
01_투두리스트 (0)	2021.03.13
Javascript 자주쓰는 문법 모음 #배열 (0)	2021.01.03