자바스크립트를 사용해서 로또 번호를 자동으로 생성해주는 프로그램을 작성하려고 합니다.
<!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>Document</title>
<style>
#main {
margin: 0 auto;
width: 800px;
height: 300px;
}
.box {
padding: 20px;
width: 200px;
height: 100px;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 100px;
border: 3px solid orange;
color: black;
background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
background-clip: text;
-webkit-background-clip: text;
}
.box:hover {
color: transparent;
transition: 500ms ease;
}
.numbers1 {
padding: 10px 0 0 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="main">
<h1>로또 번호 생성기</h1>
<div class="box">클릭 하세요</div>
<div class="numbers1">번호가 나타납니다.</div>
</div>
</body>
</html>클래스 box는 클릭 버튼 영역이고 numbers1에는 클릭 했을 때 무작위의 숫자가 표시될 영역입니다.
box 영역에는 linear-gradient 효과를 90도에 여러가지의 색을 넣고 마우스를 hover 했을 때 transparent 속성으로 부모의 색은 보이지 않도록 설정 하였습니다.
transition: 500ms ease;"는 해당 요소가 변화할 때, 0.5초 동안 이징 효과를 적용하여 부드럽게 애니메이션을 진행하도록 설정하는 것입니다.
<script>
let numbers = [];
let clickBox = document.querySelector(".box")
let lottery = document.querySelector(".numbers1")
clickBox.addEventListener("click", () => {
let numberSet = new Set();
while (numberSet.size < 6) {
let number = Math.floor(Math.random() * 45 + 1);
numberSet.add(number);
}
numbers = Array.from(numberSet);
lottery.innerHTML = numbers.join(",");
});
</script>우선, 코드는 빈 배열 numbers와 두 개의 DOM 요소를 변수로 정의합니다. clickBox는 'box' 클래스를 가진 요소를 찾습니다. 이 요소는 나중에 클릭 이벤트를 처리하기 위해 사용됩니다. lottery는 'numbers1' 클래스를 가진 요소를 찾습니다. 이 요소는 나중에 생성된 로또 번호를 표시하는 데 사용됩니다.
그 다음, clickBox에 클릭 이벤트 리스너를 추가합니다. 이벤트 리스너 함수는 다음과 같은 작업을 수행합니다.
빈 Set 객체 numberSet을 만듭니다. Set은 중복을 허용하지 않는 자료 구조이므로, 이후에 중복된 로또 번호를 제거하기 위해 사용됩니다.
while 루프를 사용하여 numberSet에 6개의 로또 번호가 들어갈 때까지 반복합니다.
각 반복에서 Math.random() 함수를 사용하여 1에서 45 사이의 난수를 생성합니다. Math.floor() 함수를 사용하여 소수점 이하를 버림 처리합니다.
새로 생성된 번호를 numberSet에 추가합니다. Set은 중복을 허용하지 않으므로, 이미 추가된 번호는 무시됩니다.
Array.from() 메소드를 사용하여 numberSet을 배열로 변환합니다.
numbers 변수에 새로 생성된 배열을 할당합니다.
lottery 요소의 내용을 생성된 로또 번호의 문자열로 업데이트합니다. join() 메소드를 사용하여 각 번호를 쉼표로 구분된 문자열로 변환합니다.
이렇게 코드를 작성하면 clickBox 요소를 클릭할 때마다 새로운 로또 번호를 생성하고 lottery 요소에 표시합니다.