728x90
반응형
로또 번호를 추첨해주는 사이트
HTML
<body>
<div id="wrap">
<h2>로또 번호 추첨기</h2>
<button>추첨하기</button>
<div class="number">
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
</div>
</div>
</body>CSS
<style>
* {
padding: 0;
margin: 0;
background-color: #a8a8a8;
}
#wrap {
margin: 0 auto;
text-align: center;
margin-top: 10px;
padding: 30px;
border: 1px solid #fff;
border-radius: 60px;
width: 500px;
height: 200px;
}
#wrap h2 {
color: #fff;
margin-bottom: 20px;
}
#wrap button {
width: 100px;
height: 50px;
transition: all 0.3s;
cursor: pointer;
color: #fff;
}
.number {
margin-top: 20px;
display: flex;
justify-content: center;
color: #fff;
}
.number * {
width: 40px;
font-weight: bold;
font-size: 24px;
}
</style>JAVASCRIPT
<script>
const num = document.querySelectorAll(".num");
const button = document.querySelector("button");
const number = new Set();
button.addEventListener("click",()=> {
number.clear();
while(number.size < 6){
let random = Math.ceil(Math.random() * 45);
number.add(random);
}
const arrNumber = [...number];
arrNumber.forEach((values, i)=>{
num[i].innerText = values;
});
});
</script>JAVASCRIPT 설명
해당 코드는 HTML, CSS, JavaScript를 사용하여 로또 번호 추첨기를 구현한 것입니다.
HTML 요소는 로또 번호 추첨기를 위한 구조를 만들어놓은 것으로, 랜덤한 번호를 생성하고 출력하는 부분은 JavaScript에서 구현되었습니다.
JavaScript에서는 우선 querySelectorAll() 함수를 이용하여 HTML에서 class가 num인 요소들을 선택하였습니다. 이는 추후에 로또 번호를 출력할 때 필요한 요소입니다.
그리고 querySelector() 함수를 이용하여 HTML에서 button 요소를 선택하였습니다. 이 요소는 추첨 버튼이며, 클릭 시 로또 번호를 랜덤하게 생성합니다.
그리고 Set() 함수를 이용하여 중복을 없앤 번호를 생성할 수 있도록 하였습니다. 새로운 로또 번호를 생성할 때마다 Set() 객체를 초기화합니다.
버튼 클릭 시, while 반복문을 이용하여 Set() 객체에 랜덤한 번호를 중복 없이 생성합니다. 이후에 ... 연산자를 이용하여 Set() 객체를 배열로 변환하고, forEach() 함수를 이용하여 num 클래스를 가진 요소들에게 번호를 하나씩 출력합니다.
마지막으로, 해당 코드에서 쉼표를 없애는 방법은 forEach() 함수 내부에서 innerText를 values로 바로 지정해주면 됩니다. 이렇게 하면 각각의 로또 번호가 쉼표 없이 출력됩니다.