- 위 사진은 아래 코드를 실행하였을때 결과 화면입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lotto</title>
<!-- TODO 추첨 번호(.number) 스타일 작성 [feature/style]-->
<style>
.number {
display: inline-block;
background: #aaa;
color: white;
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 100px;
font-size: 64px;
text-align: center;
font-weight: bold;
overflow: hidden;
}
.numset {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>로또번호 추첨기</h1>
<button onclick="genLottoHTML()">생성하기</button>
<div id="LOTTO"></div>
<script>
var LOTTO = document.getElementById("LOTTO");
// 랜덤 번호 생성 함수
function genLottoNo(){
return Math.floor(Math.random()*45);
}
// 로또 번호 추첨 함수
function getLuckyNumber(){
var numbers = [];
while( numbers.length < 6 ) {
var newNumber = genLottoNo();
if( numbers.indexOf(newNumber)<0 ) { // 중복검사
numbers.push(newNumber);
}
}
return numbers;
}
function genLottoHTML(){
var numbers = getLuckyNumber();
var lottoHTML = '';
for (var i=0; i<5; i++) {
var numbers = getLuckyNumber();
while( checkLogic(numbers) ) numbers=getLuckyNumber();
lottoHTML += '<div class="numset"><span class="number">';
lottoHTML += numbers.join('</span> <span class="number">');
lottoHTML += '</span></div>';
}
LOTTO.innerHTML = lottoHTML;
}
// 11,12,13과 같은 연속된 숫자가 3개이상 나오지 않도록 [testPR]
function checkLogic(numbers) {
for(var i=0; i<numbers.length; i++){
var no = numbers[i];
if( numbers.indexOf(no+1)>=0 && numbers.indexOf(no+2)>=0 ) return true;
}
return false;
}
</script>
</body>
</html>위 로또 코드는 이전에 깃허브 스터디 공부하면서 같이 대략적으로 공부했던 내요이다.
이번 교수님께서 언급하셔서 이전에 공부 했던 내용을 한번 더 확인하는 시간을 가졌습니다.
비록 javascript 언어를 잘모르지만 위에 대략적인 코드 문맥을 확인하면
임의 난수 발생하여 정수화 시켜서 로또 번호를 생성을 첫번째로 합니다.
다음 로또 번호가 한줄에 6개씩 나오게 설정하였으며 같은 줄에 중복된 수가 나오지 않게 조건문으로 설정 하였습니다.
총 5개의 로또 추첨 번호가 나오며 이것을 html문서로 보기 편하게 만들었습니다.
그리고 맨 마지막 연속된 숫자가 3개 이상 나오지 않도록 사용자 함수를 만들어 추가하였습니다.
마지막으로 예전에 이용했던 코드를 보면서 JS 코드의 구성을 확인하는 시간이였으며 앞으로 하나씩 알아가고자 노력할 예정입니다.
JeongGJ__K