타이머를 설정해서 작동하는 로또 추첨기를 만들어보려고 한다.
비동기 코드: 실제로 코딩한 순서와 다르게 동작하는 코드를 비동기 코드라고 한다.(ex 이벤트 리스너, 타이머)
▶HTML 먼저 작성하기
<!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>로또 추첨기</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>
</script>
</body>
</html>
▶무작위로 공 뽑기
로또 추첨 방식에서 일단 전체 공 개수를 45개로 설정을하고, 7개 공을 뽑도록 해야 한다.(6개 숫자+ 보너스 1개)
-for문을 사용하지 않고 배열의 메서드를 뽑기
-공 45개를 랜덤하게 먼저 섞은 후에, 배열 앞에서부터 7개를 자르면, 랜덤하게 숫자를 가져올 수 있다.
1) 공 45개 랜덤하게 먼저 섞기
==피셔-에이츠 셔플 알고리즘
//공 45개 무작위 섞기
const shuffle=[];
while(candidate.length>0)
{
const random=Math.floor(Math.random()*candidate.length);//무작위 인덱스 뽑기
const spliceArray=candidate.splice(random,1); //뽑은 값은 배열에 들어 잇게 됨
const value=spliceArray[0];
shuffle.push(value); //shuffle배열에 넣어줌
}
console.log(shuffle);2) 배열 앞에서부터 7개 자르고 + 보너스 제외 6개 공 정렬
뽑은 공들을 정렬하는 이유는? 로또 추첨처럼 작은 숫자부터 보여주려고 !
const winBalls=shuffle.slice(0,6).sort((a,b)=>a-b); //오름차순 정렬
const bonus=shuffle[6]; //보너스 공 가져오기
console.log(winBalls,bonus);
cf)
-원본 배열이 바뀌지 않는 함수: slice, map
- sort함수에서 문자를 사전순으로 정렬하는 방법
: arr.slice().sort((a,b)=>a[0].charCodeAt()-b[0].charCodeAt()) //첫번째 글자를 비교해서 오름차순 정렬
arr.slice().sort((a,b))=>a.localCompare(b)) //전체 자리를 다 고려해서 문자를 사전순으로 정렬해준다.
▶일정 시간 후에 실행하기
이를 실행하기 위해서는 setTimeOut()함수를 사용해주면 된다.
setTimeout(()=>console.log('hello'),3000); //3초뒤에 hello가 콘솔창에 출력 , cf)1초 =1000밀리초
-1초뒤에 태그를 직접 설정해주고 숫자를 추가해주기
const $result=document.querySelector('#result');
setTimeout(() => {
const $ball=document.createElement('div');
$ball.className='ball';
$ball.textContent=winBalls[0];
$result.appendChild($ball);
}, 1000);-반복문을 사용해주어, 공 6개에 대한div태그와 보너스 공을 만들어주기 (중복된 부분을 매개변수로 만들어주기 )
//일정시간 후에 실행하기
const $result=document.querySelector('#result');
const $bonus=document.querySelector('#bonus');
const showBall=(number,$target)=>{
const $ball=document.createElement('div');
$ball.className='ball';
$ball.textContent=number;
$target.appendChild($ball);
}
for(let i=0; i<6;i++)
{
setTimeout(() => {
showBall(winBalls[i],$result);
}, (i+1)*1000);
}
setTimeout(() => {
showBall(bonus,$bonus);
}, 7000);
결과)
cf) setTimeout(func,3500) 이랑 setTimeout(()=>{func();},3500); 은 같은 것
'FE > REACT' 카테고리의 다른 글
| [리액트]js선수 지식 - 8장 Date사용하기 -반응속도 테스트 (0) | 2022.10.10 |
|---|---|
| [리액트]js선수 지식-객체 다루기_가위바위보 게임 (0) | 2022.10.10 |
| [리액트]js선수 지식-반복문 사용(숫자야구 게임) (0) | 2022.10.10 |
| [리액트]js선수 지식- 함수 사용: 계산기 만들기 (0) | 2022.10.02 |
| [리액트] js선수 지식- 끝말잇기 게임 만들어보기 (0) | 2022.10.02 |
