<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또 번호 추천기</title>
<style>
body{
font-family: Arial, sans-serif;
background:#f4f6f8;
text-align:center;
padding-top:100px;
}
h1{
margin-bottom:40px;
}
button{
padding:15px 30px;
font-size:18px;
border:none;
border-radius:10px;
background:#2c7be5;
color:white;
cursor:pointer;
}
button:hover{
background:#1a5fd1;
}
#numbers{
margin-top:40px;
font-size:28px;
font-weight:bold;
}
.ball{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
margin:10px;
border-radius:50%;
background:#ffd43b;
color:#333;
}
</style>
</head>
<body>
<h1>🎰 로또 번호 추천기</h1>
<button onclick="generateLotto()">번호 추천받기</button>
<div id="numbers"></div>
<script>
function generateLotto(){
let numbers = [];
while(numbers.length < 6){
let num = Math.floor(Math.random()*45) + 1;
if(!numbers.includes(num)){
numbers.push(num);
}
}
numbers.sort((a,b)=>a-b);
let resultHTML = "";
numbers.forEach(n=>{
resultHTML += `<span class="ball">${n}</span>`;
});
document.getElementById("numbers").innerHTML = resultHTML;
}
</script>
</body>
</html>