완료 화면
코드/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 문서에서 클래스 이름이 “numberconsole”인 모든 요소를 선택합니다.
이를 위해 지정된 CSS 선택자와 일치하는 모든 요소를 NodeList 형식으로 반환하는 document.querySelectorAll() 메서드가 사용됩니다.
const numberConsole = document.querySelectorAll(“.numberconsole”)
: 선택한 모든 요소를 변수 numberConsole에 할당합니다.
다음으로 number라는 빈 배열을 만듭니다.
이 배열은 임의로 생성된 숫자를 저장하는 데 사용됩니다.
을 위한(…)
: for 루프를 이용하여 numberConsole의 개수만큼 모든 요소에 대해 아래에서 설명하는 연산을 수행합니다.
난수하자;
: 난수를 저장할 변수 Randomnumber를 선언합니다.
do-while 루프
: 이 루프를 사용하여 중복되지 않는 난수를 생성합니다.
do 블록에서 반복은 무조건 1회 실행되며 while 조건문이 true가 될 때까지 반복이 계속됩니다.
난수 = Math.floor(Math.random()*45)+1;
: 1에서 45 사이의 난수를 생성합니다.
Math.random() 함수는 0과 1 사이의 난수를 생성하고 Math.floor() 함수는 소수점 이하 자릿수를 버리고 정수를 얻는 데 사용됩니다.
이 값에 45를 곱하고 1을 더하면 1에서 45 사이의 정수가 됩니다.
while 조건문은 숫자 배열에 숫자가 이미 존재하는지 여부를 확인합니다.
숫자 배열에 해당 숫자가 없을 때까지 반복하여 중복 숫자를 방지합니다.
또한 number.includes(Randomnumber)를 사용하여 생성한 숫자가 배열에 이미 있는지 확인합니다.
number.push(랜덤숫자)
: 생성된 숫자를 숫자 배열에 추가합니다.
numberConsole(i).textContent = 난수
: Randomnumber 변수에 저장된 난수를 해당 “numberconsole” 요소의 textContent 속성에 할당합니다.
그러면 임의의 숫자가 표시됩니다.
const Numbtn = document.querySelector(“#randombtn”)
: HTML 문서에서 ID가 “randomtn”인 요소를 선택하고 변수 Numbtn에 할당합니다.
Numbtn.addEventListener(“클릭”, numberRandom)
: Numbtn 요소에 대한 “클릭” 이벤트 리스너를 추가합니다.
즉, Numbtn 요소를 클릭할 때마다 numberRandom 함수가 실행됩니다.
이를 통해 사용자가 “randombtn” 버튼을 클릭할 때마다 “numberconsole” 요소에 1~45 사이의 임의의 숫자가 표시됩니다.