728x90
반응형
※set()을 이용해 중복없이 랜덤으로 로또 번호 생성하기
전체 소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p428 마무리 문제</title>
<link href="https://webfontworld.github.io/ChosunGs/ChosunGs.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
background-color: #333232;
}
#wrap {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.border {
width: 100%;
height: 280px;
border: 3px solid #fff;
border-radius: 10px;
}
.lotto {
padding: 30px;
text-align: center;
}
.lotto h3 {
padding: 10px 0;
color: #fff;
padding-bottom: 25px;
}
.lottobtn {
width: 20%;
height: 60px;
color: #fff;
border-radius: 50px;
}
.lottonum {
display: flex;
text-align: center;
justify-content: center;
padding: 20px 0;
}
.num_color {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
color:#252525;
}
.lottonum .num{
display: flex;
justify-content: center;
align-items: center;
color: #000;
width: 25px;
height: 25px;
border-radius: 50%;
font-family: 'ChosunGs';
}
</style>
</head>
<body>
<div id="wrap">
<div class="border">
<div class="lotto">
<h3>로또 번호 생성기</h3>
<button class="lottobtn">번호 생성</button>
<div class="lottonum">
<div class="num_color">
<div class="num"></div>
</div>
<div class="num_color">
<div class="num"></div>
</div>
<div class="num_color">
<div class="num"></div>
</div>
<div class="num_color">
<div class="num"></div>
</div>
<div class="num_color">
<div class="num"></div>
</div>
<div class="num_color">
<div class="num"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
const wrap = document.querySelector("#wrap");
const lottoBtn = wrap.querySelector(".lottobtn");
const lottoNum = wrap.querySelector(".lottonum");
const lottocolor = wrap.querySelectorAll(".lottonum .num_color");
const lottonumLength = wrap.querySelectorAll(".num_color .num");
lottoBtn.addEventListener("click", function(){
let set = new Set(); //S는 대문자
for(i=0; i<6; i++){
set.add(Math.floor(Math.random() * 45) + 1)
}
let randomNum = Array.from(set)
randomNum.forEach((num,i) => {
if(num <= 10){
lottocolor[i].style.background = "#f8ec3e";
} else if (num <= 20){
lottocolor[i].style.background = "#2947f3";
} else if (num <= 30){
lottocolor[i].style.background = "#f84848";
} else if (num <= 40){
lottocolor[i].style.background = "#252525";
} else {
lottocolor[i].style.background = "#037e03";
}
lottonumLength[i].innerHTML = num;
lottonumLength[i].style.background = "#fff";
});
});
</script>
</html>
javascript
<script>
const wrap = document.querySelector("#wrap");
const lottoBtn = wrap.querySelector(".lottobtn");
const lottoNum = wrap.querySelector(".lottonum");
const lottocolor = wrap.querySelectorAll(".lottonum .num_color");
const lottonumLength = wrap.querySelectorAll(".num_color .num");
lottoBtn.addEventListener("click", function(){
let set = new Set(); //S는 대문자
for(i=0; i<6; i++){
set.add(Math.floor(Math.random() * 45) + 1)
}
let randomNum = Array.from(set)
randomNum.forEach((num,i) => {
if(num <= 10){
lottocolor[i].style.background = "#f8ec3e";
} else if (num <= 20){
lottocolor[i].style.background = "#2947f3";
} else if (num <= 30){
lottocolor[i].style.background = "#f84848";
} else if (num <= 40){
lottocolor[i].style.background = "#252525";
} else {
lottocolor[i].style.background = "#037e03";
}
lottonumLength[i].innerHTML = num;
lottonumLength[i].style.background = "#fff";
});
});
</script>·우선 그곳에 값을 가져오거나 넣기위해 선택자를 만들어 줍니다.
·addEventListener()의 이벤트함수를 이용해 lottoBtn을 클릭했을때 함수가 실행 되도록 하였습니다.
· set 변수하나를 만들어 new Set() 저장해준후 for문을 이용하여 변수안에 45개의 번호를 랜덤으로 6개 넣어줍니다.(이때 Set() 에 의해서 중복되는 값은 나오지 않게 됩니다.)
·randomNum 변수를 하나 더 만들어 Array.from()을 이용해 set을 배열로 변환하여 저장 해줍니다.
·randomNum를 forEach()함수로 실행해서 값(num)과 인덱스값(i)을 가져옵니다.
·조건문if를 통해 각구간의 값마다 색을 바꾸어 주었습니다.
·중복없이 랜덤으로 뽑은 숫자 6개를 lottonumLength[i]만큼 innerHTML를 이용하여 넣어주고 그곳에배경을 흰색으로 해주었습니다.