Event
로또 번호뽑기
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#lotto > li {
display: inline-block;
font-size : 40px;
width: 80px;
height: 80px;
margin: 30px;
border-radius: 40px;
text-align: center;
line-height: 80px;
margin: 30px;
}
#lotto.none {
display: none;
}
#lotto > li.a {
background: yellow;
}
#lotto > li.b {
background:blue;
}
#lotto > li.c {
background: red;
}
#lotto >li.d {
background: gray;
}
#lotto > li.e {
background: green;
}
#lotto > li:last-child{
margin : 0 0 0 170px;
}
</style>
</head>
<body>
<h1>로또번호 생성기</h1>
<ul id="lotto" class="none">
<li class="">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
<li class="">7</li>
</ul>
<button id="btn">번호 생성</button>
<script src="./public/js/lottotext.js" type="text/javascript"></script>
</body>
</html>
- 번호 생성 버튼을 누르면. #lotto엘리먼트 보이게 하고 싶다.
1.1 번호 생성버튼 에다가 이벤트(click)을 넣자
1.1.1 번호생성 엘리먼트를 선택해서 가져올 수 잇어야함 = quertSelector
1.1.2 #lotto 선택해서 가져오기.- 랜덤 숫자를 뽑아서 부여하는 것.
2.1 랜덤 숫자를 뽑는 것 랜덤 숫자 뽑는 방법!
2.2 랜던숫자를 부여 ( 언제 부여할지? )
2.2.1 클릭할때 랜덤 값 생성해보기.
2.2.2 랜덤값 6개 만들기.
2.2.3 엘리먼트 선택?? querySelectorAll()
2.2.4 각각 순서에 맞게 내용을 넣어주기.
문제 확인하기.- 색깔이 안바뀜...
1.1 내가 랜덤으로 뽑은 숫자가 범위가 어디에 해다오디는지.
1~10, 11~20, 21~30, 31~40, 41~45
1.1.1 12숫자가 있을때 1~10인지 체크해보자
9 숫자가 있을때 1~10에 해당되는지 체크하는 함수를 만들어보자.
1.2 input 1~45 1~10 a, 11~20 b, 21 ~ 30 c ...41~45
className을 활용해서 처리하자.- 로또는 중복값이 없어야한다.
const btn = document.querySelector("#btn")
const lottoDisplay = document.querySelector("#lotto")
const lottoBox = document.querySelectorAll("#lotto > li")
let numTable=[]
function randomLotto() { // 랜덤 번호 리턴 함수
const random = Math.floor(Math.random() * numTable.length)
return random
}
function between(num, min, max) { // 범위 조건에 따라 true false 반환 함수
if (num >= min && num <= max){
return true
}else {
return false
}
}
function classColor(){ // 색깔 별 class변경함수
for ( index in lottoBox){
if (between(lottoBox[index].innerHTML,41,45)) {
lottoBox[index].className = 'e'
}
if (between(lottoBox[index].innerHTML,31,40)) {
lottoBox[index].className = 'd'
}
if (between(lottoBox[index].innerHTML,21,30)) {
lottoBox[index].className = 'c'
}
if (between(lottoBox[index].innerHTML,11,20)) {
lottoBox[index].className = 'b'
}
if (between(lottoBox[index].innerHTML,1,10)) {
lottoBox[index].className = 'a'
}
}
}
//랜덤 번호들을 각 로또 박스에 넣음. (중복제거까지.)
function lottoHandler() {
numTable=[]
for ( let i = 1; i < 46; i++){
numTable.push(i)
}
for ( let i = 0; i < lottoBox.length; i++){
num = randomLotto()
lottoBox[i].innerHTML = numTable[num]
numTable.splice(num,1)
}
console.log(numTable)
classColor() //각 번호에 맞는 색을 맞춰줌=> 색에 맞는 클래스 변경.
lottoDisplay.classList.remove("none") // display none 삭제
}
btn.addEventListener("click", lottoHandler)