[ 자바스크립트 ] 로또 번호 생성기 2

 
[ 이용 방법 ] 

1. 자동 선택 : 1부터 45 사이의 숫자들 중에서, 6 개의 숫자를 랜덤으로 생성합니다. 

2. 숫자 선택 
   ①. 선택하신 숫자가 5 개 이하이면, 나머지 숫자는 6 개까지 랜덤으로 추가됩니다. 
   ②. 선택하신 숫자가 6 개 이면, 똑같은 로또 번호가 반복 생성됩니다. 
   ③. 선택하신 숫자가 7 개 이상이면, 그 숫자들 중에서 6 개를 랜덤으로 생성합니다.
 

원하는 옵션을 선택하세요.

자동 선택 숫자 선택

---

최종 수정일 : 2017년

 
<p>원하는 옵션을 선택하세요. </p>

<select id="optional" size="2" onchange="changeStyle( this , myInput );resetCheckboxes( myInput, myOutput )">
    <option value="random">자동 선택 </option>
    <option value="pick">숫자 선택 </option>
</select>

<br />

<div id="choose"></div>

<button onclick="resetCheckboxes( myInput, myOutput )"> RESET </button>
<button onclick="displayLotto( myInput , myOutput )"> 로또 번호 생성기 </button>

<br />

<div id="lotto"></div> <!-- 또는,  <textarea id="lotto" style="display: block"></textarea>  -->
 

 
<script type="text/javascript">

var myInput = document.getElementById( "choose" ); 
var myOutput = document.getElementById( "lotto" ); 


var setupInput = function (){ 

        var parent = myInput; 

        var inner = ' <p>좋아하는 숫자들을 선택하신 후, "로또 번호 생성기"를 클릭하세요. </p> '; 

        var checkbox = ' <label><input type="checkbox" value="#" />#</label> '; 

        var tag, number; 

        for ( number = 1; number < 46; number++ ){ 

                tag = checkbox.replace( /#/g , number ); 

                if ( number % 10 == 0 ){  tag += "<br />";  } 

                inner += tag; 
        } 

        parent.innerHTML = inner; 
}(); 


function changeStyle ( selectTag , checkboxZone ){ 

        var value = selectTag.value; 

        if ( value == "random" ){  checkboxZone.style.display = "none";  } 
        else {  checkboxZone.style.display = "block";  } 
} 


function resetCheckboxes ( checkboxZone , outputZone ){ 

        ( "value" in outputZone ) ? outputZone.value = "" : outputZone.innerHTML = ""; 

        var checkboxes = checkboxZone.getElementsByTagName( "input" ); 

        for ( var n = 0; n < checkboxes.length; n++ ){  checkboxes[ n ].checked = false;  } 
} 
</script>
 

 
<script type="text/javascript">

// 출처 : https://tonks.tistory.com/118 
// 에러가 나온다면, 여기에 댓글을 남겨주세요. 

function displayLotto ( checkboxZone , outputZone ){ 

        var br, blank, p; 

        if ( "value" in outputZone ){     br = "\n";     blank = "   ";     p = [ "" , "\n" ];     } 

        else {     br = "<br />";     blank = " &nbsp; ";     p = [ "<p>" , "</p>" ];     } 

        var inner = "", x, tickets; 

        for ( x = 0; x < 5; x++ ){ 

               tickets = fiveTickets( checkboxZone, blank, br ); 

               inner += p[0] + tickets + p[1]; 
        } 

        ( "value" in outputZone ) ? outputZone.value = inner : outputZone.innerHTML = inner; 
}  


function fiveTickets ( checkboxZone , blank , br ){ 

        var alphabetical = [ "A" , "B" , "C" , "D" , "E" ]; 
        var regExp = /\s(?=\d\,)|\s(?=\d$)/g; 

        var lottoText = "", n, text; 

        for ( n = 0; n < 5; n++ ){ 

               text = " " + oneTicket( checkboxZone ); 

               text = text.replace( regExp, blank ); 

               if (  lottoText.indexOf( text ) > -1  ){  n -= 1;  continue;  } 

               lottoText += alphabetical[ n ] + blank + text + br; 
        } 

        return lottoText; 
} 


function oneTicket ( checkboxZone ){ 

        var array = arrayForLotto( checkboxZone ); 

        if ( array.length == 6 ){  return array.join( ", " );  } 

        array.sort( function(){  return Math.random() - 0.5 } ); 

        var start = Math.random() * ( array.length - 5 ); 
             start = Math.floor( start ); 

        array = array.slice( start, start + 6 ); 

        array.sort(  function(a, b){ return a - b }  ); 

        return array.join( ", " ); 
} 

function arrayForLotto ( checkboxZone ){ 

        var checkboxes = checkboxZone.getElementsByTagName( "input" ); 
        var array = [ ], n, number; 

        // 선택한 숫자들만 가져오기 
        for ( n = 0; n < checkboxes.length; n++ ){ 

                if ( ! checkboxes[ n ].checked ){  continue;  } 

                number = parseFloat ( checkboxes[ n ].value ); 
                array.push ( number ); 
        } 

        // 선택한 숫자가 없을 경우 
        if ( array.length == 0 ){    for ( n = 1; n < 46; n++ ){ array.push( n ); }    } 

        // 선택한 숫자가 5개 이하일 경우 
        else if ( array.length < 6 ){ 

               var count = 6 - array.length; 
               var newNumber, index; 

                for ( n = 0; n < count; n++ ){ 

                       newNumber = 1 + Math.floor( Math.random() * 45 ); 

                       if ( array.indexOf ){  index = array.indexOf ( newNumber );  } 
                       else { 
                           index = -1; 
                           for ( var x = 0; x < array.length; x++ ){  if ( array[ x ] == newNumber ) index = x;  }
                       } 

                       if ( index > -1 ){  n -= 1;  continue;  } 

                       array.push ( newNumber ); 
                } 

               array.sort(  function(a, b) { return a - b }  ); 
        } 

        return array; 
} 
</script>
 

 
<style type="text/css">/* 원하는 스타일대로 수정하세요. */ 

#optional           { padding: 3px 0px; width: 145px; } 
#optional option  { padding: 2px 4px; height: 20px; } 

#choose , #lotto { margin: 15px 0px; } 

#choose label  { display: inline-block; width: 50px; } 
#choose input  { margin-right: 3px; } 
#choose p       { margin: 15px 0px; } 

#lotto p   { display: inline-block; width: 200px; margin-bottom: 20px; } 

</style>
 

추가적인 설명은 아래글을 참고하세요.
[ 자바스크립트 ] 로또 번호 생성기 1

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*