Jam's story
[JS] 로또번호 본문
로또번호
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>
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 |