728x90
- 자 오늘도 예제입니다!!
- 오늘 예제는 다들 두근두근 하실 텐데요
- 바로 일확천금의 꿈인 로또 번호 자동생성기 입니다. 이번주는 이 번호로 한번...
- 넓이가 좁을 때 번호박스의 위치가 좀 밀리긴 하는데 이정도면 준수하네요!! ㅋㅋㅋㅋ
- 바로 스크립트를 보시죠
// 선택자
const lottonum = document.querySelectorAll(".number p");
const clickBtn = document.querySelector(".click");
// 필요한 변수
let numLength = lottonum.length
let num = []
// 함수
clickBtn.addEventListener("click",function(){
while (num.length < numLength) { // 필요한 숫자 개수만큼 무작위 숫자 생성
const random = Math.floor(Math.random() * 45) + 1;
if (!num.includes(random)) { // 배열에 중복된 숫자가 없으면 배열에 추가
num.push(random);
}
}
lottonum.forEach((el,i)=>{
// num +=[random];
lottonum[i].innerHTML=num[i]
})
num = [];
})- 저는 일단 번호를 넣을 p태그 6개와 버튼을 선택자로 만들어주고 번호의 갯수(6개)와 번호를 저장할 num이라는 빈 배열을 만들어 주었습니다.
- 그리고 addEventListener를 통해 버튼을 클릭했을 때 함수가 실행되게 해주었습니다.
- while문을 통해서 조건에 맞을 때 까지 반복을 시켜주었는데 배열 안의 갯수가 p태그의 갯수보다 적을 때 실행되게 해주었습니다.
- 그러니까 5개일 땐 실행이 되어 6개가 된다는 것이죠
- 그리고 함수가 실행되면 1-46까지의 랜덤한 숫자를 뽑아내고 if문과 !num.includes(random)을 통해 만약 배열 안에 랜덤이라는 숫자가 없다면 true가 되어 num안에 그랜덤의 숫자를 추가해주었습니다.
- 만약 배열안에 그 숫자가 있다면 false가 되어 push가 실행되지 않겠죠 ㅎㅎ
- 그리고 그렇게 저장된 배열을 forEach문과 InnerHTML를 통해서 출력시켜주었습니다.
- 끝!!
홈페이지 : https://kebab000.github.io/web2023/homework/homeworkindex/2023.04.16.html