JS, 로또 당첨 숫자 뽑기(+ 보너스 숫자도 포함)

로또 당첨 숫자 뽑기(+ 보너스 숫자도 포함)

 

이미지

 

조건

1. 총 7개의 난수를 1부터 45의 숫자 사이에서 구한다.

2. 오름차순으로 정렬해서 출력한다(보너스 숫자 제외)

3. 1~10,11~20,21~30,31~45 단위로 색을 다르게 지정한다.

4. "로또 출력" 버튼을 누르면 로또 숫자가 새로 만들어진다.

---

HTML 구문

<div id="lotto"></div>
<div><input type="button" id="reset" onclick="reset()" value="로또 출력"></div>

 

JavaScript 구문

function random(x,y){
	return Math.floor(Math.random() *(y-x+1) + x);
}

function lotto(){
	let lotto = [];

	while(lotto.length<7){
		num = random(1,45);

		if(!lotto.includes(num)){
			lotto.push(num);
		}
	}

	let bonus = lotto.splice(6,1);

	lotto.sort((a,b) => a-b);

	for(let i=0; i<6; i++){
		document.getElementById("lotto").innerHTML += "<div class='num'>" + lotto[i] + "</div>";
	}

	document.getElementById("lotto").innerHTML += "<div class='plus'>+</div><div class='num'>" + bonus + "</div>";

	let lottoList = lotto.concat(bonus);

	background(lottoList);
}

function background(lotto){
	let divBack = document.getElementsByClassName("num");

	for(let i=0; i<lotto.length; i++){
		if(parseInt(lotto[i]) < 10){
			divBack[i].style.backgroundColor = "#FBC400";
		}else if(parseInt(lotto[i]) < 20){
			divBack[i].style.backgroundColor = "#69C8F2";
		}else if(parseInt(lotto[i]) < 30){
			divBack[i].style.backgroundColor = "#FF7272";
		}else if(parseInt(lotto[i]) < 40){
			divBack[i].style.backgroundColor = "#aaa";
		}else{
			divBack[i].style.backgroundColor = "#B0D840";
		}
	}
}

function reset(){
	location.reload();
}

---

해석

 

로또 번호를 저장할 배열 선언

let lotto = [];

 

배열의 길이가 6일 때 즉, 난수를 6개 다 구했을 때까지 while문을 진행한다.

while(lotto.length<7)

 

num에 난수를 구하는 함수에서 구한 값을 받아오고

num = random(1,45);

 

 

 

난수를 구하는 함수

function random(x,y){
	return Math.floor(Math.random() *(y-x+1) + x);
}

 

 

 

그 값이 배열에 저장되어 있는 값들과 같지 않다면

if(!lotto.includes(num))

 

배열에 추가해라

lotto.push(num);

 

 

 

보너스 숫자를 하나 빼고(원본도 같이 삭제)

let bonus = lotto.splice(6,1);

 

남은 숫자를 정렬해라(오름차순)

lotto.sort((a,b) => a-b);

 

---

출력

 

숫자 출력(6개의 로또 번호)

for(let i=0; i<6; i++){
	document.getElementById("lotto").innerHTML += "<div class='num'>" + lotto[i] + "</div>";
}

 

보너스 숫자 출력

document.getElementById("lotto").innerHTML += "<div class='plus'>+</div><div class='num'>" + bonus + "</div>";

 

---

색 바꾸기

 

다시 보너스 숫자를 배열에 넣고(concat : 배열 결합) 색 바꾸는 함수(background())로 보내기

let lottoList = lotto.concat(bonus);
background(lottoList);

 

로또 번호 각각마다 선언해준 num 클래스를 가지고

let divBack = document.getElementsByClassName("num");

 

숫자 비교 후 해당되는 숫자에 배경색 넣기

for(let i=0; i<lotto.length; i++){
	if(parseInt(lotto[i]) < 10){
		divBack[i].style.backgroundColor = "#FBC400";

 

---

 

버튼 누르면 다시 로또 번호 다시 생성하기

location.reload();