<!DOCTYPE html>
<html lang="en">
<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>
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
.num1 {
background-color: red;
}
.num2 {
background-color: orange;
}
.num3 {
background-color: yellow;
}
.num4 {
background-color: green;
}
.num5 {
background-color: blue;
}
.num6 {
background-color: purple;
}
.bonus{
background-color: aqua;
}
</style>
</head>
<body>
<div id="result">추첨 결과는? </div>
<div id="bonus">보너스: </div>
<script>
let numbers = Array(45).fill(0).map((el, idx) => idx + 1)
let mixnumbers = []
let shuffle = []
while (numbers.length > 1) {
let index = Math.floor(Math.random() * numbers.length)
let value = numbers.splice(index, 1)
let realvalue = value[0]
shuffle.push(realvalue)
}
let answer = shuffle.slice(0, 6).sort((a, b) => a - b)
let bonus = shuffle[6]
let $result = document.querySelector('#result')
for (let i = 0; i < answer.length; i++) {
setTimeout(() => {
let $ball = document.createElement('div')
$ball.textContent = answer[i]
$ball.className = 'ball'
$result.appendChild($ball)
if(answer[i]===answer[0]){
$ball.classList.add('num1')
}
else if(answer[i]===answer[1]){
$ball.classList.add('num2')
}
else if(answer[i]===answer[2]){
$ball.classList.add('num3')
}
else if(answer[i]===answer[3]){
$ball.classList.add('num4')
}
else if(answer[i]===answer[4]){
$ball.classList.add('num5')
}
else if(answer[i]===answer[5]){
$ball.classList.add('num6')
}
}
, 1000 + (i * 1000)
)
}
let $bonus = document.querySelector('#bonus')
setTimeout(() => {
let $ball = document.createElement('div')
$ball.textContent = bonus
$ball.className = 'ball'
$bonus.appendChild($ball)
$ball.classList.add('bonus')
}, 7000);
</script>
</body>
</html>로또 추첨기를 만들어봤다. 피셔 예이츠 셔플을 사용하여 numbers안에 값들을 무작위로 셔플했고 거기서 6자리를 뽑아 출력했다.
+버전을 수동버전, 자동버전으로 만들어서 몇등인지 알려주는 기능을 추가해봐야겠다.
@banhogu