완성 화면
코드 보기 / CSS
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
background-color: #000;
width: 100%;
height: 100%;
}
.box {
text-align: center;
width: 1000px;
height: 500px;
border: 5px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
align-items: center;
}
.decs {
text-align: center;
font-size: 30px;
color: #fff;
padding: 100px;
}
.numberconsole {
display: inline-block;
color: #000;
display: flex;
align-items: center;
justify-content: center;
word-spacing: 10px;
margin: 20px;
background-color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
}
#randombtn {
display: block;
position: absolute;
left: 45%;
top: 70%;
width: 100px;
height: 50px;
font-size: 24px;
cursor: pointer;
background-color: royalblue;
border-radius: 15px;
font-size: 18px;
color: #fff;
border: 2px solid #fff;
}
코드 보기 / HTML
<div class="box">
<div class="decs">랜덤 번호</div>
<div class="numberconsole"></div>
<div class="numberconsole"></div>
<div class="numberconsole"></div>
<div class="numberconsole"></div>
<div class="numberconsole"></div>
<div class="numberconsole"></div>
<button id="randombtn">click</button>
</div>이런식으로 쓸 생각은 아니었지만 6개 밖에 안 되고 귀찮아서 그만
코드 보기 / JAVASCRIPT
const numberRandom = () => {
const numberConsole = document.querySelectorAll(".numberconsole")
const number = [];
for(let i=0; i<numberConsole.length; i++) {
let Randomnumber;
do {
Randomnumber = Math.floor(Math.random()*45)+1;
} while (number.includes(Randomnumber));
number.push(Randomnumber);
numberConsole[i].textContent = Randomnumber;
}
};
const Numbtn = document.querySelector("#randombtn");
Numbtn.addEventListener("click", numberRandom);
const numberRandom = () => {...}
: 함수를 정의한다. 화살표 함수를 사용하여 함수를 정의하였고, 화살표 함수는 ES6(ECMAScript 2015) 문법으로 함수를 더 간결하게 작성할 수 있다.
이 함수에서는 HTML 문서에서 class 이름이 "numberconsole"인 모든 요소를 선택한다.
이를 위해 document.querySelectorAll() 메소드를 사용하며, 이 메소드는 지정된 CSS 선택자에 일치하는 모든 요소를 NodeList 형식으로 반환한다.
const numberConsole = document.querySelectorAll(".numberconsole")
: 선택된 모든 요소를 변수 numberConsole에 할당한다.
다음으로 number라는 빈 배열을 생성한다.
이 배열은 무작위로 생성된 숫자들을 저장하기 위한 용도로 사용된다.
for(...)
: for 반복문을 사용하여 numberConsole의 수만큼 모든 요소에 대해 이 아래로 서술되는 작업을 수행한다.
let Randomnumber;
: 무작위 숫자를 저장하기 위한 변수 Randomnumber를 선언한다.
do-while 반복문
: 이 반복문을 사용하여 중복되지 않는 무작위 숫자를 생성한다.
do 블록에서는 무조건 한 번은 반복이 실행되며, while 조건문이 true일 때까지 반복이 계속된다.
Randomnumber = Math.floor(Math.random()*45)+1;
: 1부터 45 사이의 무작위 숫자를 생성한다.
Math.random() 함수는 0부터 1 사이의 난수를 생성하며, Math.floor() 함수를 사용하여 소수점 이하를 버리고 정수를 얻는다. 이렇게 얻은 값에 45를 곱하고 1을 더하여 1부터 45 사이의 정수를 얻는다.
while 조건문에서는 number 배열에 생성한 숫자가 이미 존재하는지 확인한다.
number 배열에 해당 숫자가 없을 때까지 반복하여 중복되는 숫자를 피한다.
또한 number.includes(Randomnumber)를 사용하여 배열에 생성한 숫자가 이미 존재하는지 확인한다.
number.push(Randomnumber)
: 생성한 숫자를 number 배열에 추가한다.
numberConsole[i].textContent = Randomnumber
: Randomnumber 변수에 저장된 무작위 숫자를 해당 "numberconsole" 요소의 textContent 속성에 할당한다.
이를 통해 무작위 숫자가 표시되는 것이다.
const Numbtn = document.querySelector("#randombtn")
: HTML 문서에서 "randombtn" ID를 가진 요소를 선택하고, 이를 변수 Numbtn에 할당한다.
Numbtn.addEventListener("click", numberRandom)
: Numbtn 요소에 대해 "click" 이벤트 리스너를 추가한다.
즉, Numbtn 요소가 클릭될 때마다 numberRandom 함수가 실행되는 것이다.
이를 통해, 사용자가 "randombtn" 버튼을 클릭할 때마다 1부터 45 사이의 무작위 숫자가 "numberconsole" 요소에 표시되게 되는 것이다.
