알고리즘 테스트 ⏲/JavaScript
[JavaScript] 로또 추첨기 풀이
- -
로또 추첨기 풀이
6개의 무작위 공과 1개의 보너스 공을 뽑아주는 프로그램을 작성하시오.
개인 풀이
다이어그램
알고리즘
// 무작위 숫자 7개 뽑기
const allNumbers = Array(45)
.fill()
.map((el, i) => i + 1);
const randomNumbers = [];
for (let _ = 0; _ < 7; _++) {
const index = Math.floor(Math.random() * allNumbers.length); // 0 ~ 8
randomNumbers.push(allNumbers[index]);
allNumbers.splice(index, 1);
}
const ballNumbers = randomNumbers.slice(0, 6).sort((a, b) => a - b);
// 숫자 배치
const $ballsContainer = document.querySelector(".ballsContainer");
const $bonusContainer = document.querySelector(".bonusContainer");
const handleColors = (i) => {
if (i >= 40) return "purple";
else if (i >= 30) return "wheat";
else if (i >= 20) return "red";
else if (i >= 10) return "green";
else return "gray";
};
const makeBall = (i, array) => {
const $ball = document.createElement("div");
$ball.textContent = array[i];
$ball.style.backgroundColor = handleColors(array[i]);
return $ball;
};
for (let i = 0; i < 7; i++) {
setTimeout(() => {
if (i < 6) $ballsContainer.append(makeBall(i, ballNumbers));
else $bonusContainer.append(makeBall(i, randomNumbers));
}, 500 * i);
}<!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>
.bonusContainer, .ballsContainer {
display: flex;
}
.bonusContainer div, .ballsContainer div{
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
width:50px;
height:50px;
padding: 3px;
border-radius: 50%;
margin-right: 20px;
}
</style>
</head>
<body>
<span>추첨결과</span>
<div class="ballsContainer">
</div>
<span>보너스</span>
<div class="bonusContainer"></div>
<script src="index.js"></script>
</html>'알고리즘 테스트 ⏲ > JavaScript' 카테고리의 다른 글
| [JavaScript] 미니 전투 게임 제작 (0) | 2022.02.08 |
|---|---|
| [JavaScript] 틱택토 프로그램 풀이 (0) | 2022.02.07 |
| [JavaScript] 클릭속도 테스트 풀이 (0) | 2022.02.07 |
| [JavaScript] 가위바위보 대결 프로그램 풀이 (0) | 2022.02.05 |
| [JavaScript] 숫자야구 풀이 (0) | 2022.02.04 |
Contents
소중한 공감 감사합니다