반응형
로또
HTML
HTML
<body>
<fieldset>
<legend>로또번호 생성하기</legend>
<span>로또 번호 :</span>
<span></span>
<span>보너스 번호 :</span>
<span></span>
<button onclick="lottoPrint()">생성</button>
</fieldset>
</body>
JavaScript
1.랜덤함수
function makeBall(){
return Math.floor(Math.random()*45+1);
}2.중복제거
function lottoBalls(){
//랜덤담을 배열 생성
var balls=new Array();
var count=0;
while(count<7){
var ball=makeBall();
//balls배열에 뽑은 숫자 없으면 추가
if(balls.indexOf(ball)==-1){
balls.add(ball);
count++;
}
}
return balls;
}3.화면출력
function lottoPrint(){
//DOM탐색으로 span태그내부에 뽑은 배열 출력
var spans=document.getElementByTagName("span");
//랜덤 배열 저장 후 6개+1개(보너스) 구분
var obj=lottoBalls();
var ball6=obj.slice(0,6);
var bonus=obj.pop();
//배열요소들이 사전적으로 정렬이 되어있기 때문에 숫자기준으로 정렬
ball6.sort(function(a,b){return a-b;});
//배열사이에 - 넣기
balls.join("-");
spans[1].innerHTML=`<div style="font-size:50px; color: blue;"> ${balls}</div>`;
spans[3].innerHTML=`<div style="font-size:50px; color: green;"> ${bonus}</div>`;
}
기타 참고
공백 1칸(spacebar)- Math.random()
0~1사이의 무작위 수 - Math.floor()
소수점 이하 버림 - 배열 내부의 숫자들을 기준으로 정렬할 때 어떤 요소로 정렬할지 기준을 정해야한다.
반응형
'Front-end > Javascript' 카테고리의 다른 글
| (JavaScript)DOM -appendChild,insertBefore (0) | 2023.03.03 |
|---|---|
| (JavaScript)DOM탐색 속성 (0) | 2023.03.02 |
| (JavaScript)window객체-open,close (0) | 2023.02.28 |
| (JavaScript)날짜 객체 (0) | 2023.02.27 |
| (JavaScript)함수 (0) | 2023.02.23 |