로또 만들기 1단계
<!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); //뽑은 값은 spliceArray배열에 들어 있음
const value = spliceArray[0] //spliceArray배열에서 첫번째 값을 꺼낸다.
shuffle.push(value); //shuffle에 넣는다.
}
console.log(shuffle)
const winBalls = shuffle.splice(0, 6).sort((a,b)=> a - b);
const bonus = shuffle[6];
console.log(winBalls, bonus)
</script>
</body>
</html>▶ splice() 메서드는 배열에서 지정된 인덱스부터 지정된 개수만큼의 요소를 제거하면서
제거된 요소들을 배열로 리턴한다.
Array(45).fill().map( (v, i) => i+1);
→배열을 undefined 45개로 채운다. 그리고 나서 Array의 index가 0, 1, .. 44까지 있는데, 거기다가 1씩 더하겠다.
→map()함수를 사용하는 경우 원본데이터는 변하지 않으며,
Array이외의 "별도의 배열"이 만들어진다.
const array = [1, 2, 3, 4, 5]
array.splice(2, 1)
[3] //리턴값이 배열이다!!
splice() 메서드는
배열에서 지정된 인덱스부터 지정된 개수만큼의 요소를 제거하면서 제거된 요소들을 배열로 리턴합니다
slice vs splice
array = [3, 2, 9, 7, 5, 8, 6, 4, 1]
array.slice(4, 7) : 인덱스 4부터 7직전까지 슬라이싱
[5, 8, 6]
array.slice(4, -1) :인덱스 4부터 마지막요소 전까지 슬라이싱
[5, 8, 6, 4]
array.splice(3, 2) : 인덱스 3부터 2개
[7, 5]
array.splice(3, 1): 인덱스 3부터 1개
[7]
sort()는 원본데이터를 바꾼다.
array.sort((a, b) => {
return a - b;
} );
원본데이터를 바꾸지 않고 sort()하는 skill
a - b :오름차순
b - a : 내림차순
array.slice().sort((a,b) => a-b);
array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr = ['apple', 'orange', 'grape', 'banana', 'kiwi' ]
arr.slice().sort( (a, b) => a[0].charCodeAt() - b[0].charCodeAt())
[ "apple", "banana", "grape", "kiwi", "orange" ]
arr.slice().sort( (a, b) => b[0].charCodeAt() - a[0].charCodeAt())
[ "orange", "kiwi", "grape", "banana", "apple" ]
arr.slice().sort( (a, b) => a.localeCompare(b)) //사전순 정렬
[ "apple", "banana", "grape", "kiwi", "orange" ]
arr.slice().sort( (a, b) => b.localeCompare(a)) //사전순 반대 정렬
[ "orange", "kiwi", "grape", "banana", "apple" ]
로또 만들기 2단계
<!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];
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>▶ const $ball = document.createElement("div");
▶ div태그요소를 만들어서 그 태그를 $ball변수에 저장한다.
▶ $ball.className = "ball";
▶ 새로 만든 div에 클래스 선택자를 새로 만든다.
'렛츠기릿 자바스크립트' 카테고리의 다른 글
| 로또 등수 매기기 (self) (0) | 2023.01.16 |
|---|---|
| 로또 만들기 self (공에 색깔 넣기) (0) | 2023.01.15 |
| forEach, map, fill 알아보기 (0) | 2023.01.14 |
| 숫자야구게임 -self(3아웃인 경우) (0) | 2023.01.14 |
| 렛츠기릿 자바스크립트 8 - 숫자야구게임(for문, indexOf()) (0) | 2023.01.14 |