JSFiddle - React, Tailwind, and code Playground

by Kye Sooryun

HTML

<div class="wrap">
	<h1>로또번호생성기</h1>
	<div class="box">
		<p id="lotto_text"></p>
		<button type="button" class="btn_new">번호 생성</button>
	</div>
	<div class="box"></div>
</div>

CSS

*{margin:0;padding:0;list-style:none;}
html,body{height:100%;font-size:14px/1.5 'verdana', sans-serif;}
.wrap{width:700px;margin:100px auto;border:1px solid #999;}
h1{margin:10px;}
h2{margin:10px 0;}
div.box{margin:10px;}
ul.list:after{content:'';display:block;clear:both;}
ul.list li{float:left;margin-right:20px;}
p.point input{width:200px;height:23px;line-height:23px;border:1px solid #999;text-align:right;}
select{border:1px solid #999;width:200px;height:23px;}
em.price{font-size:15px;color:#ff9900;font-style:normal;}

JavaScript

$(document).ready(function () {
		$('.btn_new').on('click', function() {
			var lotto = new Array(6), // 6개의 배열이 lotto에 저장
				count = 0, //추출한 로또번호의 갯수
				overl = true; // 번호중복 여부 변수

			while (count < 6) { //로또번호 6번 얻을 때까지 반복
				var number = 0; //랜덤번호 가져오는 변수
				number = parseInt(Math.random() * 45) + 1; //1~45사이에 랜덤번호 추출

				for (var i = 0; i < count; i++) { //1부터 i까지 반복하여 중복확인
					if (lotto[i] == number) { //중복된 번호가 없으면 넘어감
						overl = false;
					}
				}

				if (overl) { //중복 없을 시 count 1 증가
					lotto[count] = number; //추출된 번호를 배열에 넣기
					count++;
				}

				overl = true; //원래 true로 돌아가기

				var lotto_test = ('#lotto_text'); //입력폼 id가져오기

				lotto_text = $('#lotto_text').text(lotto[0] + ', ' + lotto[1] + ', ' + lotto[2] + ', ' + lotto[3] + ', ' + lotto[4] + ', ' + lotto[5]);
			}
		});
	});