로또번호를 생성하는 앱을 만들어 봤습니다. Lotto! 버튼을 누르면 로또번호가 자동으로 생성됩니다. 5개단위로 굵은 줄로 구분이 됩니다.
(로또 1등 당첨확률은 8,145,060 분의 1 이라고 합니다. 로또는 재미로만 합시다. 😅)
<!DOCTYPE html>
<style>
.lotto-box {
margin: 10px 0;
padding: 3px;
background: beige;
min-height: 50px;
}
.lotto-line {
padding: 5px;
border-bottom: 1px solid lightgray;
}
.lotto-line-5th {
border-bottom: 2px solid gray;
}
.lotto-line:last-child {
border: none;
}
.lotto-ball {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
vertical-align: top;
margin-right: 5px;
}
.lotto-number {
font-size: 20px;
font-weight: bold;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
.lotto-btn {
padding: 5px 12px;
}
</style>
<div style="display:flex; justify-content:space-between;">
<button class='lotto-btn' onclick="addLotto()">Lotto!</button>
<button class='lotto-btn' onclick="clearLotto()">Clear</button>
</div>
<div class="lotto-box" id="lottoBox"></div>
<script>
var lottoColors = ["orange", "blue", "red", "black", "green"];
var lottoBalls = [];
for (var i = 1; i <= 45; i++) lottoBalls.push(i);
var lottoLineCount = 0;
function addLotto() {
shuffle(lottoBalls);
var balls = lottoBalls.slice(0, 6);
balls.sort((a, b) => a - b);
var boxElem = document.getElementById("lottoBox");
var lineElem = document.createElement("div");
lineElem.className = "lotto-line" +
((++lottoLineCount % 5 == 0) ? " lotto-line-5th" : "");
for (var n of balls) {
var ballElem = document.createElement("div");
ballElem.className = "lotto-ball";
ballElem.style.backgroundColor = lottoColors[Math.floor((n - 1) / 10)];
var numElem = document.createElement("div");
numElem.className = "lotto-number";
numElem.innerHTML = n;
ballElem.appendChild(numElem);
lineElem.appendChild(ballElem);
}
boxElem.appendChild(lineElem);
}
function clearLotto() {
document.getElementById("lottoBox").innerHTML = "";
lottoLineCount = 0;
}
function randInt(a, b) {
return Math.floor(Math.random() * (b - a + 1)) + a;
}
function shuffle(ar) {
for (var i = ar.length - 1; i > 0; i--) {
var r = randInt(0, i);
var temp = ar[i];
ar[i] = ar[r];
ar[r] = temp;
}
}
</script>