-
자바스크립트 로또번호 추첨기개발일지/Javascript 2020. 4. 17. 11:42
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>로또추첨기</title> <style></style> </head> <body> <div>당첨숫자</div> <div id="결과창"></div> <div>보너스</div> <div class="보너스"></div> <script src="script.js"></script> </body> </html>var 후보군 = Array(45) .fill() .map(function (요소, 인덱스) { return 인덱스 + 1; }); console.log(후보군); var 셔플 = []; while (후보군.length > 0) { var 이동값 = 후보군.splice(Math.floor(Math.random() * 후보군.length), 1)[0]; 셔플.push(이동값); // 랜덤하게 섞어서 후보군에 푸쉬함 (엄밀하게 수학적으로 랜덤은 아님에 주의) } console.log(셔플); var 보너스 = 셔플[셔플.length - 1]; // 마지막숫자를 가져올수 있습니다. var 당첨숫자들 = 셔플.slice(0, 6).sort(function (p, c) { // slice 는 (0부터 6) 까지 숫자를 6을 제외하고 나눕니다 return p - c; // sort는 숫자를 순서대로 정렬 c - p 로 하면 내림차순으로 p c 를 비교하여 뺀 결과가 0보다 크면 순서를 바꾸기 때문에 순서대로 됩니다. }); var 결과창 = document.querySelector("#결과창"); // html 태그를 찾는 선택자 function 공색칠하기(숫자, 결과창) { var 공 = document.createElement("div"); 공.textContent = 숫자; 공.style.display = "inline-block"; // javascript로 css를 추가하는 방법 공.style.border = "1px solid black"; 공.style.borderRadius = "10px"; 공.style.width = "20px"; 공.style.height = "20px"; 공.style.textAlign = "center"; 공.style.marginRight = "10px"; var 배경색; if (숫자 <= 10) { 배경색 = "red"; } else if (숫자 <= 20) { 배경색 = "orange"; } else if (숫자 <= 30) { 배경색 = "yellow"; } else if (숫자 <= 40) { 배경색 = "blue"; } else { 배경색 = "green"; } 공.style.background = 배경색; 결과창.appendChild(공); } setTimeout(function 비동기콜백함수() { 공색칠하기(당첨숫자들[0], 결과창); }, 1000); // 1초 setTimeout(function 비동기콜백함수() { 공색칠하기(당첨숫자들[1], 결과창); }, 2000); // 2초 setTimeout(function 비동기콜백함수() { 공색칠하기(당첨숫자들[2], 결과창); }, 3000); // 3초 setTimeout(function 비동기콜백함수() { 공색칠하기(당첨숫자들[3], 결과창); }, 4000); // 4초 setTimeout(function 비동기콜백함수() { 공색칠하기(당첨숫자들[4], 결과창); }, 5000); // 5초 setTimeout(function 비동기콜백함수() { 공색칠하기(당첨숫자들[5], 결과창); }, 6000); // 6초 setTimeout(function 비동기콜백함수() { var 칸 = document.querySelector(".보너스")[0]; // 클래스는 여러번 사용할수 있기 때문에 뒤에 번호를 붙여줘야 합니다. 공색칠하기(보너스, 칸); }, 7000);구름에듀의 제로초님 강의를 보고 직접 주석을 달며 작성한 코드입니다.
배운내용
for문은 자신이 반복문을 몇번 사용해야 하는지 알때 while문은 모를때 사용하는것이 편하다.
sort를 이용하면 숫자를 순서대로 나열할수가 있다.
html태그는 querySelector 태크를 사용하면 실수도 적고 편하다.
for문안에 비동기 함수가 들어가 있는 경우 오류가 발생하는데 클로저를 이용하여 해결해야 한다.
'개발일지 > Javascript' 카테고리의 다른 글
Maxium callstack exceeded error 해결 (0) 2020.04.21 자바스크립트 지뢰찾기 / javascript mine sweeper (0) 2020.04.20 자바스크립트 틱택토 (0) 2020.04.16 javascript function / 자바스크립트 함수 (0) 2020.04.11 자바스크립트 반복문 (0) 2020.04.10