원본
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>로또추첨기</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;
}
</style>
</head>
<body>
<div id="result">추첨 결과는?</div>
<div id="bonus">보너스:</div>
<script>
const candidate = Array(45)
.fill()
.map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스(0~44) 뽑기
const spliceArray = candidate.splice(random, 1); // splice()의 리턴타입은 배열이다.
const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
shuffle.push(value); // shuffle 배열에 넣기
}
console.log(shuffle);
const winBalls = shuffle.slice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
console.log(winBalls, bonus);
const $result = document.querySelector("#result");
const drawBall = (number, $parent) => {
const $ball = document.createElement("div");
$ball.className = "ball";
$ball.textContent = number;
$parent.appendChild($ball);
};
for (let i = 0; i < winBalls.length; i++) {
setTimeout(() => {
drawBall(winBalls[i], $result);
}, (i + 1) * 1000);
}
const $bonus = document.querySelector("#bonus");
setTimeout(() => {
drawBall(bonus, $bonus);
}, 7000);
</script>
</body>
</html>
나의 풀이
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>로또추첨기</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;
}
</style>
</head>
<body>
<div id="result">추첨 결과는?</div>
<div id="bonus">보너스:</div>
<script>
const candidate = Array(45)
.fill()
.map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
console.log(candidate.length);
const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스(0~44) 뽑기
const spliceArray = candidate.splice(random, 1); // splice()의 리턴타입은 배열이다.
const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
shuffle.push(value); // shuffle 배열에 넣기
}
console.log(shuffle);
const winBalls = shuffle.slice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
const colorList = [
//colorList 배열을 만든다.
"red",
"yellow",
"aqua",
"green",
"grey",
"Orange",
"Aquamarine",
];
console.log(winBalls, bonus);
const $result = document.querySelector("#result");
const drawBall = (number, $parent, color) => {
const $ball = document.createElement("div");
$ball.className = "ball";
$ball.textContent = number;
$ball.style.backgroundColor = color; //ball을 담고 있는 div태그를 선택한다.
$parent.appendChild($ball); //result의 div태그 안에 ball의 div태그를 붙이겠다.
};
for (let i = 0; i < winBalls.length; i++) {
setTimeout(() => {
drawBall(winBalls[i], $result, colorList[i]);
}, (i + 1) * 1000);
}
const $bonus = document.querySelector("#bonus");
setTimeout(() => {
drawBall(bonus, $bonus, colorList[6]); //colorList의 마지막공은 보너스 공이 된다.
}, 7000);
</script>
</body>
</html>▶ coloList 배열에 보너스 공을 포함한 7가지의 색깔을 담았다.
▶ div태그를 담고있는 $ball변수에서 backgroundColor를 적용하였다.
▶ drawBall에 colorList[i]라는 매개변수를 별도로 추가하였다.
강사 풀이
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>로또추첨기</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;
}
</style>
</head>
<body>
<div id="result">추첨 결과는?</div>
<div id="bonus">보너스:</div>
<script>
const candidate = Array(45)
.fill()
.map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스(0~44) 뽑기
const spliceArray = candidate.splice(random, 1); // splice()의 리턴타입은 배열이다.
const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
shuffle.push(value); // shuffle 배열에 넣기
}
console.log(shuffle);
const winBalls = shuffle.slice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
console.log(winBalls, bonus);
const $result = document.querySelector("#result");
function colorize(number, $tag) {
if (number < 10) {
$tag.style.backgroundColor = "red";
$tag.style.color = "white";
} else if (number < 20) {
$tag.style.backgroundColor = "orange";
} else if (number < 30) {
$tag.style.backgroundColor = "yellow";
} else if (number < 40) {
$tag.style.backgroundColor = "blue";
$tag.style.color = "white";
} else {
$tag.style.backgroundColor = "green";
$tag.style.color = "white";
}
}
const drawBall = (number, $parent) => {
const $ball = document.createElement("div");
$ball.className = "ball";
colorize(number, $ball);
$ball.textContent = number;
$parent.appendChild($ball);
};
for (let i = 0; i < winBalls.length; i++) {
setTimeout(() => {
drawBall(winBalls[i], $result);
}, (i + 1) * 1000);
}
const $bonus = document.querySelector("#bonus");
setTimeout(() => {
drawBall(bonus, $bonus);
}, 7000);
</script>
</body>
</html>
▶ color함수를 별도로 만들자
▶ 함수(draBall) 안에 함수(colorize)를 넣자
▶ 숫자의 범위를 정해서 ball의 color를 다르게 할 수 있다.
'렛츠기릿 자바스크립트' 카테고리의 다른 글
| 가위 바위 보 (3선승제) (0) | 2023.01.16 |
|---|---|
| 로또 등수 매기기 (self) (0) | 2023.01.16 |
| 로또 만들기 - splice( )★★+태그요소만들기+className추가 +sort() (0) | 2023.01.15 |
| forEach, map, fill 알아보기 (0) | 2023.01.14 |
| 숫자야구게임 -self(3아웃인 경우) (0) | 2023.01.14 |