Jam's story

[JS] 로또번호 본문

WEB/JavaScript

[JS] 로또번호

애플쩀 2022. 6. 8. 10:49

로또번호

js

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 06:12:55</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>1.html</h3>
<button>로또 번호 발생기</button>
<div id="demo"></div>
<script>
    var lotto=[];
    document.querySelector("button").onclick=function(){
        var n;
        lotto=[];
        while(lotto.length<6){
            n=getRandRange(1,45);
            if(isDup(lotto,n)){
                lotto.push(n);
            }
        };
        lotto.sort((a,b)=>a-b);
        document.getElementById("demo").innerHTML=lotto.toString();

    };
    function getRandRange(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }
    function isDup(lotto,n){
        return lotto.every(function(elt,i,array){
            return elt!=n;
        });
    }
</script>
</body>
</html>

 

 

JQuery

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.08 09:25:01</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>1.html</h3>
<button>로또 번호  발생기</button>
<p id="demo"></p>

<script>
    $("button").click(function(event){
        var lotto=[];
        var n;
        while(lotto.length<6){
            n=getRndRange(1,45);
            //중복이 안된다면 
            if(isDup(lotto,n)){
                lotto.push(n);
            }
            
        }
        // 그냥 sort()는 문자열에 해당하고 숫자비교를 하려면 이렇게
         lotto.sort((a,b)=>a-b);
        $("#demo").html("<ul><li>"+lotto.join("</li><li>")+"</li></ul>");
    });
    function getRndRange(min,max){
       return Math.floor(Math.random()*(max-min+1))+min; 
    }

    function isDup(lotto,n){
        return lotto.every(function(elt, i ,array){
            return elt!=n;
        })
            }
</script>
</body>
</html>
2022.06.09 06:12:55

1.html

 

 

 

 

select 태그 로또 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 07:16:17</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>로또selectJQ.html</h3>
<select id="cmbCnt">
</select>
<button>로또 번호 발생기</button>
<div id="demo"></div>

<script>
    for(var i=1; i<=20; i++){
    $("#cmbCnt").append("<option>"+i+"</option>");
    }
</script>
<script>
    var lottos=[];
    $("button").click(function(event){
        lottos=[];
        var n;
        for (let i = 0; i < $("#cmbCnt").val(); i++) {
           var lotto=[];
            while(lotto.length<6){
            n=getRandRange(1,45);
            if(isDup(lotto,n)){
                lotto.push(n);
            }

        };
        lotto.sort((a,b)=>a-b);
        lottos.push(lotto);
        }
       $("#demo").html(lottos.join("<br>").toString());

    });
    function isDup(lotto,n){
        return lotto.every(function(elt,i,array){
            return elt!=n;
        });
    }
    function getRandRange(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }
</script>
</body>
</html>

 

 

 

set 이용 로또 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 07:16:17</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>로또selectJQ.html</h3>
<select id="cmbCnt">
</select>
<button>로또 번호 발생기</button>
<div id="demo"></div>

<script>
    for(var i=1; i<=20; i++){
    $("#cmbCnt").append("<option>"+i+"</option>");
    }
</script>
<script>

    $("button").click(function(event){
        var lottos=new Set();
                var n;
        for (let i = 0; i < $("#cmbCnt").val(); i++) {
            lotto=[]; 
            while(lotto.length<6){
            n=getRandRange(1,45);
            if(isDup(lotto,n)){
                lotto.push(n);
            }

        };
        lotto.sort((a,b)=>a-b);
        for(let e of lotto.values()){
                         console.log(e);
                
                        }
        }


    });
    function isDup(lotto,n){
        return lotto.every(function(elt,i,array){
            return elt!=n;
        });
    }
    function getRandRange(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }
</script>
</body>
</html>

이 부분 알기 

  var lottos=new Set();

for(let e of lotto.values()){
console.log(e);
   }

'WEB > JavaScript' 카테고리의 다른 글

[JS] this 의 4가지 경우  (0) 2022.06.08
[JS] 호이스팅  (0) 2022.06.08
[JS] 메뉴클릭하면 글이 나오도록  (0) 2022.06.06
[JS] 객체, 컬렉션 프레임워크  (0) 2022.06.06
[JS] Boolean  (0) 2022.06.06
Comments