728x90
반응형
CSS
<!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>로또</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
#lotto {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid #000; */
}
button {
width: 400px;
padding: 20px;
font-size: 20px;
border: none;
border-radius: 40px;
background-color: #fff;
}
#result {
padding: 20px;
font-size: 30px;
color: #fff;
}
body {
background-color: #111111;
color: #fff;
}
#container {
margin: 0 auto;
max-width: 520px;
text-align: center;
padding-top: 300px;
}
#container h1 {
font-weight: normal;
text-transform: uppercase;
margin: 0.3125em 0;
background-color: #111111;
position: relative;
display: inline-block;
padding: 0 10px;
font-size: 30px;
}
.style-1 {
font-family: "Pacifico", sans-serif;
text-transform: none!important;
color: #fff;
}
.style-1:before {
content: "";
height: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
position: absolute;
width: 300%;
top: 50%;
left: -100%;
z-index: -999;
font-size: 50px;
}
</style>
</head>Scritp
<body>
<div id="container">
<h1 class="style-1">🍀Lotto🍀</h1>
<button>Click!</button>
<div id="result"></div>
</div>
</body>
<script>
let button = document.querySelector("button");
let result = document.querySelector("#result");
function lottoNumber(){
let randomLotto = new Set();
for(let i=1; i<=6; i++){
randomLotto.add(Math.floor(Math.random() * 45) + 1);
}
result.innerText = [...randomLotto];
}
button.addEventListener("click", lottoNumber);
</script>
</html>이 JavaScript 코드는 "Click!" 버튼을 클릭하면, "lottoNumber" 함수가 호출되어 무작위 6개의 숫자를 생성하고, 생성된 숫자를 "result" 요소의 innerText로 할당하여 화면에 출력합니다.
첫째 줄에서는, HTML에서 button 요소를 선택하여 "button" 변수에 할당합니다. 이를 통해 이벤트 리스너를 추가하고, 클릭 이벤트가 발생했을 때 함수를 호출할 수 있습니다.
둘째 줄에서는, HTML에서 결과를 출력할 div 요소를 선택하여 "result" 변수에 할당합니다.
이를 통해 결과를 표시할 수 있습니다.
셋째 줄에서는, "lottoNumber" 함수를 정의합니다. 이 함수는 새로운 Set 객체를 만들고, 1부터 45 사이의 무작위 숫자를 생성하여 Set 객체에 추가합니다. 이렇게 하면, Set 객체는 중복된 값을 제거하여 고유한 6개의 숫자가 선택됩니다.
마지막으로, Set 객체를 배열로 변환하여 "result" 요소의 innerText에 할당합니다. 마지막 줄에서는, "button" 요소에 클릭 이벤트 리스너를 추가하여, 버튼이 클릭되었을 때 "lottoNumber" 함수가 호출되도록 합니다. 이를 통해 사용자가 버튼을 클릭할 때마다 새로운 숫자가 생성되어 화면에 출력됩니다.