지난 시간 PC에 설치된 브라우저에서 로또번호 를 한개씩 생성하는 방법을 알아보았다.
이번에는 6개의 숫자를 중복없이 생성하는 방법을 알아본다.
실행 결과물은 하기와 같다.
로또번호 받기 버튼을 클릭하면 로또 번호 6개를 받을 수 있다.
그럼, 소스를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또</title>
<script> // 숫자를 중복체크
// 로또 번호를 초기화 한다
var number = [0,0,0,0,0,0] ;
var rand ;
var count;
var duplicate;
function lotto(){
count=0;
do{
duplicate=false;
rand = Math.floor(Math.random()*45) + 1;
for(var i=0 ; i < number.length; i++){
if(number[i] == rand){
duplicate = true;
break;
}
}
if(!duplicate){
number[count]= rand;
count++;
}
}while(count < 6)
document.getElementById("result").innerHTML = "🍀 행운번호 🍀</br>" + number;
}
</script>
</head>
<body>
<input type="button" value="로또번호 받기" onclick="lotto();">
<div id="result"></div>
</body>
</html>
소스는 크게 자바스크립트 코드 부분과 HTML 요소 이렇게 두개로 나뉜다.
1. HTML 요소 (버튼 과 숫자가 표시될 영역)
<input type="button" value="로또번호 받기" onclick="lotto();">
<div id="result"></div>
1-1. 버튼
input 타입을 활용해서 버튼을 만들었다.
버튼 클릭시 동작을 위해서 lotto2() 함수를 연결한다.
1-2. div (숫자가 표시될 영역)
숫자가 표시될 영역으로 div 요소를 설정한다.
2. 자바스크립트 ( 함수 )
버튼 클릭시 동작을 위한 자바스크립트 함수 부분이다.
로또 번호를 얻는 핵심 알고리즘이 이 함수 하나에 들어있다.
2-1. 함수에서 사용될 변수를 선언한다.
<script>
// 로또 번호를 초기화 한다
var number = [0,0,0,0,0,0] ;
var rand ;
var count;
var duplicate;
number 는 6개의 로또 번호를 받기위해서 6개의 0 값으로 초기화 한다.
rand : 난수를 저장하는 변수
count : 카운트 변수
duplicate : 중복 체크를 위한 불연 변수
2-2 . 로또번호 생성 함수
function lotto(){
count=0;
do{
duplicate=false;
rand = Math.floor(Math.random()*45) + 1;
for(var i=0 ; i < number.length; i++){
if(number[i] == rand){
duplicate = true;
break;
}
}
if(!duplicate){
number[count]= rand;
count++;
}
}while(count < 6)
document.getElementById("result").innerHTML = "🍀 행운번호 🍀</br>" + number;
}
2-2-1. do..while() 반복문
6개의 숫자가 다 채워질때 까지 돌린다.
2-2-2. Math.floor(Math.random*45) + 1
1~45 까지의 랜덤 숫자를 얻는다.
2-2-3. 중복체크
난수가 기존 6개의 숫자와 중복인지 체크한다.
중복되는 숫자를 하나라도 만나면 duplicate 변수를 true 로 세팅하고 for문을 종료한다.
for(var i=0 ; i < number.length; i++){
if(number[i] == rand){
duplicate = true;
break;
}
}
2-2-4. 번호 저장
난수가 중복이 아니라면, 배열 요소의 index 순서(count) 대로 하나씩 숫자를 저장한다.
if(!duplicate){
number[count]= rand;
count++;
}
2-2-5. 번호 출력
반복문을 마치고 얻은 6개의 숫자를 div 영역에 표기한다.
document.getElementById("result").innerHTML = "🍀 행운번호 🍀</br>" + number;
로또 번호 생성기를 통해서
랜덤 함수 와 반복문
그리고 자바스크립 와 HTML 요소의 연결 등을 배울 수 있다.
간단한 코드지만, 재미있게 그리고 실제 로또번호에도 활용할 수 있다.
Good!
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 20강. 자바스크립트 타이머 만들기 (1) | 2024.08.20 |
|---|---|
| 19강. 로컬스토리지 사용하기 (1) | 2024.08.19 |
| 로또 숫자 만들기 with 자바스크립트 (랜덤 함수 활용하기) (3) | 2024.08.12 |
| 17강. DOM을 활용하여 신규요소 추가하기 (1) | 2024.08.05 |
| 16강. 웹 페이지를 동적으로 만들기 (1) | 2024.08.03 |
댓글