Notice
Recent Comments
Recent Posts
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Today
Total
관리 메뉴

기록 ＞ 기억

[JavaScript] 로또번호 출력하기 본문

IT국비지원

[JavaScript] 로또번호 출력하기

BY SON 2021. 9. 30. 20:57

로또번호 출력하기

 

예제 ①

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lotto</title>
<style>
	#lotto {
		width: 500px;
		min-height: 250px;
		margin: 50px auto;
		padding: 20px;
		box-sizing: border-box;
		border: 1px solid #aaa;
	}
	#lotto #result {
		padding: 20px;
		margin-top: 20px;
		height: 180px;
		background-color: #ddd;
		overflow: scroll;
	}
</style>
</head>
<body>
<div id="lotto">
	<form name="frm_lotto" method="post">
		<label>게임수</label>
		<input type="text" name="count" value="5">
		<input type="button" value="시작" name="btnStart">
	</form>
	<div id="result"></div>
</div>

<script>
	/*
		1. 1~45의 난수 생성
		2. 난수 중복체크 → 배열에 삽입 
		3. 오름차순 정렬
	*/
	let form = document.frm_lotto;
	let out = document.getElementById("result");
	
	form.btnStart.onclick = function() {
		let cnt = Number(form.count.value);
		str = "";
		
		for(let i=0; i<cnt; i++) {
			let arr = lotto();
			str += " [ " + (i+1) + " ] " + arr.join(", ") + "<br/>";	
		}
		out.innerHTML = str;
	}
	
	//로또 번호 생성
	function lotto() {
		let nums = [];
		
		do {
			//1~45 난수생성
			let n = parseInt(Math.random()*45) + 1;	//1 <= r < 46 (1~45)
			let duplicated = false;
			
			//중복 체크
			for(let i=0; i<nums.length; i++) {
				if(nums[i] == n) {
					duplicated = true;
					break;
				}
			}
			
			if(duplicated) {
				continue;
			}else {
				//배열에 추가
				let no = (n < 10) ? "0" + n : n;
				nums.push(no);
			}
		} while(nums.length < 6);
		
		//오름차순 정렬
		nums.sort(function(a, b) {
			return a-b;
		});
		
		return nums;
	}
</script>
</body>
</html>

 

예제 ②

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lotto2</title>
<style>
	#lotto {
		width: 500px;
		min-height: 250px;
		margin: 50px auto;
		padding: 20px;
		box-sizing: border-box;
		border: 1px solid #aaa;
	}
	#lotto #result {
		padding: 20px;
		margin-top: 20px;
		height: 180px;
		background-color: #ddd;
		overflow: scroll;
	}
</style>
</head>
<body>
<div id="lotto">
	<form name="frm_lotto" method="post">
		<label>게임수</label>
		<input type="text" name="count" value="5">
		<input type="button" value="중복허용" name="duplicated">
		<input type="button" value="중복방지" name="notDuplicated">
	</form>
	<div id="result"></div>
</div>
<script>
	/*
		1. 배열에 1~45 저장
		2. 난수를 사용하여 배열의 순서변경(스와핑)
		3-1. 중복번호 허용 6개 추출
		3-2. 중복번호 없이 6개 추출
	*/
	
	let form = document.frm_lotto;
	let out = document.getElementById("result");
	
	//중복허용
	form.duplicated.onclick = function() {	
		let cnt = Number(form.count.value);
		let str = "";		
		
		for(let i=0; i<cnt; i++) {
			let nums = lotto();
			let arr = nums.slice(0, 6);
			arr.sort(ascend);
			str += " [ " + (i+1) + " ] " + arr.join(", ") + "<br/>";
		}
		out.innerHTML = str;
	}
	
	//중복방지
	form.notDuplicated.onclick = function() {
		let cnt = Number(form.count.value);
		let str = "";
		
		let nums = lotto();
		
		for(let i=0; i<cnt; i++) {
			str += " [ " + (i+1) + " ] ";
			
			let arr = nums.splice(0, 6);
			arr.sort(ascend);
			str += arr.join(", ") + "<br>";
		}
		out.innerHTML = str;
	}	
	
	//로또번호 생성
	function lotto() {
		let nums = [];
		
		//1~45 배열에 넣기
		for(let i=1; i<46; i++) {
			let no = (i < 10) ? "0" + i : i;
			nums.push(no);
		}
		
		//순서 섞기(스와핑)
		for(let i=0; i<1000; i++) {
			let p = parseInt(Math.random()*45);	//0 <= r < 45 (0~44)
			let temp = nums[0];
			nums[0] = nums[p];
			nums[p] = temp;
		}
		return nums;
	}
	
	//오름차순 정렬
	function ascend(a, b) {
		return a-b;
	}
</script>
</body>
</html>

 

저작자표시 비영리

'IT국비지원' 카테고리의 다른 글

[MySQL] MySQL ZIP Archive 설치  (0) 2021.10.05
[JavaScript] 객체 생성 방법 (리터럴, 생성자)  (0) 2021.10.04
[JavaScript] 회원가입 유효성 검사  (0) 2021.10.04
[JavaScript] 내장 객체 ① Date 객체  (0) 2021.09.29
[JavaScript] 이벤트  (0) 2021.09.29
[JavaScript] 폼 객체 ④ select 객체  (0) 2021.09.29
[JavaScript] 폼 객체 ③ checkbox 객체  (0) 2021.09.29
'IT국비지원' Related Articles more
Comments