[JS] 예제 5종 로또, 전화번호 전화기, 가위바위보, 별찍기, 야구게임(JavaScript/JQuery)

jychae·2022년 11월 16일
0

자바스크립트

목록 보기
3/5
post-thumbnail

📌로또

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
	console.log("myclick");
	var objs = document.querySelectorAll(".mydiv");
	    
	var arr = [
        1,2,3,4,5,       6,7,8,9,10,
        11,12,13,14,15,  16,17,18,19,20,
        21,22,23,24,25,  26,27,28,29,30,
        31,32,33,34,35,  36,37,38,39,40,
        41,42,43,44,45
    ];
    
	console.log(arr)
    
	for (var i = 0; i < 1000; i++) { 
		var rnd = parseInt(Math.random()*45);
		var a = arr[0];
        var b = arr[rnd];
        arr[0]=b
        arr[rnd]=a   
	}	
	
	console.log(arr);
	objs[0].innerHTML = arr[0];
	objs[1].innerHTML = arr[1];
	objs[2].innerHTML = arr[2];
	objs[3].innerHTML = arr[3];
	objs[4].innerHTML = arr[4];
	objs[5].innerHTML = arr[5];
}
</script>
</head>

<body>
<table border="1">
	<tr>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
	</tr>
	<tr>
		<td colspan="6">
			<input type="button" value="lotto인생한방" onclick="myclick()"/>
		</td>
	</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){
	
	var arr = [
        1,2,3,4,5,       6,7,8,9,10,
        11,12,13,14,15,  16,17,18,19,20,
        21,22,23,24,25,  26,27,28,29,30,
        31,32,33,34,35,  36,37,38,39,40,
        41,42,43,44,45
    ];
    
	for (var i = 0; i < 1000; i++) { 
		var rnd = parseInt(Math.random()*45);
		var a = arr[0];
        var b = arr[rnd];
        arr[0]=b
        arr[rnd]=a   
	}	
	
	$(".mydiv").eq(0).html(arr[0]);	
	$(".mydiv").eq(1).html(arr[1]);	
	$(".mydiv").eq(2).html(arr[2]);	
	$(".mydiv").eq(3).html(arr[3]);	
	$(".mydiv").eq(4).html(arr[4]);	
	$(".mydiv").eq(5).html(arr[5]);	
}

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});
});
</script>
</head>

<body>
<table border="1">
	<tr>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
		<td><div class="mydiv" >__</div></td>
	</tr>
	<tr>
		<td colspan="6">
			<input type="button" value="lotto인생한방" id="btn"/>
		</td>
	</tr>
</table>
</body>
</html>

📌전화번호 전화기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
	width: 100px;
	text-align: right;
}
</style>
<script type="text/javascript">
function myclick(obj){
	var obj_it = document.querySelector("#it");
	var str_new = obj.value;
	var str_old = obj_it.value;
	
	obj_it.value = str_old + str_new
	
	console.log("myclick",obj.value);
	console.log("myclick",str_new,str_old);
}

function mycall(){
	var obj_it = document.querySelector("#it");

	alert("calling\n" + obj_it.value);
}

</script>
</head>

<body>
<table border="1">
	<tr>
		<td colspan="3">
			<input type="text" id="it"/>
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="1" onclick="myclick(this)"/>
		</td>
		<td >
			<input type="button" class="btn" value="2" onclick="myclick(this)"/>
		</td>
		<td >
			<input type="button" class="btn" value="3" onclick="myclick(this)"/>
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="4" onclick="myclick(this)"/>
		</td>
		<td >
			<input type="button" class="btn" value="5" onclick="myclick(this)"/>
		</td>
		<td >
			<input type="button" class="btn" value="6" onclick="myclick(this)"/>
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="7" onclick="myclick(this)"/>
		</td>
		<td >
			<input type="button" class="btn" value="8" onclick="myclick(this)"/>
		</td>
		<td >
			<input type="button" class="btn" value="9" onclick="myclick(this)"/>
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="0" onclick="myclick(this)"/>
		</td>
		<td colspan="2" >
			<input type="button" id="btn_call" value="CALL" onclick="mycall()"/>
		</td>
	</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
	width: 100px;
	text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function mycall(){

	alert("calling\n" + $("#it").val());
}

function myclick(obj){
	var str_new = obj.value;
	var str_old = $("#it").val();
	
	$("#it").val(str_old + str_new);
	
}



$(document).ready(function(){
	$(".btn").bind("click", function (event) {
		//console.log(event.target);
	 	myclick(event.target);
	});
	
});

</script>
</head>

<body>
<table border="1">
	<tr>
		<td colspan="3">
			<input type="text" id="it"/>
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="1" />
		</td>
		<td >
			<input type="button" class="btn" value="2" />
		</td>
		<td >
			<input type="button" class="btn" value="3" />
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="4" />
		</td>
		<td >
			<input type="button" class="btn" value="5" />
		</td>
		<td >
			<input type="button" class="btn" value="6" />
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="7"  />
		</td>
		<td >
			<input type="button" class="btn" value="8" />
		</td>
		<td >
			<input type="button" class="btn" value="9" />
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="0" />
		</td>
		<td colspan="2" >
			<input type="button" id="btn_call" value="CALL" onclick="mycall()"/>
		</td>
	</tr>
</table>
</body>
</html>

또 다른 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#it{
	width: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
	var it = document.querySelector("#it");
	var btn = document.querySelectorAll(".btn");
	
	for(i = 0; i < btn.length; i++){
		btn[i].addEventListener('click', function(){numclick(event)}); 
	}
	
}

	function numclick(event){
		console.log(event.target.value);
		var num_val = event.target.value;
		var str_new = num_val;
		var str_old = it.value;
		var resStr = str_old+str_new;
		
		console.log("str_old" + str_old);
		console.log("str_new" + str_new);
		console.log(resStr);
		
		it.value = str_old + str_new;
	}
	
	function myclick(){
		var nums = it.value;
		alert(nums + " 으로 전화거는 중...")
		it.value="";
	}
</script>
</head>
<body>
<table border="1">
	<tr>
		<td	colspan="3">
			<input type="text" id="it" dir="rtl"/>
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" class="btn" value="1"/>
		</td>
		<td>
			<input type="button" class="btn" value="2"/>
		</td>
		<td>
			<input type="button" class="btn" value="3"/>
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" class="btn" value="4"/>
		</td>
		<td>
			<input type="button" class="btn" value="5"/>
		</td>
		<td>
			<input type="button" class="btn" value="6"/>
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" class="btn" value="7"/>
		</td>
		<td>
			<input type="button" class="btn" value="8"/>
		</td>
		<td>
			<input type="button" class="btn" value="9"/>
		</td>
	</tr>
		<td>
			<input type="button" class="btn" value="0"/>
		</td >
		<td colspan="2">
			<input type="button" id="btn_call" value="CALL" onclick="myclick()"/>
		</td>
	<tr>

	</tr>
</table>

</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
	width: 100px;
	text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">


var str =""

$(document).ready(function(){
	$(".btn").bind("click", function (event) {
	   str += $(this).val();
	   $("#it").val(str);
	});
	
	$("#btn_call").bind("click", function(){
		alert("calling\n" + str )
		
	});
	
	
});

</script>
</head>

<body>
<table border="1">
	<tr>
		<td colspan="3">
			<input type="text" id="it"/>
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="1" id="btn"/>
		</td>
		<td >
			<input type="button" class="btn" value="2" id="btn" />
		</td>
		<td >
			<input type="button" class="btn" value="3" id="btn" />
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="4" id="btn" />
		</td>
		<td >
			<input type="button" class="btn" value="5" id="btn" />
		</td>
		<td >
			<input type="button" class="btn" value="6" id="btn" />
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="7" id="btn" />
		</td>
		<td >
			<input type="button" class="btn" value="8" id="btn" />
		</td>
		<td >
			<input type="button" class="btn" value="9" id="btn" />
		</td>
	</tr>
	<tr>
		<td >
			<input type="button" class="btn" value="0" id="btn" />
		</td>
		<td colspan="2" >
			<input type="button" id="btn_call" value="CALL" onclick="mycall()"/>
		</td>
	</tr>
</table>
</body>
</html>

📌가위바위보

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.it {
	width: 30px;
}
</style>
<script type="text/javascript">
function myclick(){
	// 가위바위보!
	console.log("myclick");
	var obj_com = document.querySelector("#itCom");
	var obj_mine = document.querySelector("#itMine");
	var obj_result = document.querySelector("#itResult");
	
	var com = ""
    var mine = obj_mine.value;
    var result = ""
    
    console.log(com,mine,result);

    var rnd = Math.random();
    console.log(rnd)
    
    if (rnd > 0.66) {
        com = "가위" ;
    } else if (rnd > 0.33) {
        com = "바위" ;
    } else {
    	com = "보" ;
    }
    console.log(com)
    
    if (com == "가위" && mine == "가위") { result ="비김" };
    if (com == "가위" && mine == "바위") { result ="이김" };
    if (com == "가위" && mine == "보") { result ="짐" };
    
    if (com == "바위" && mine == "가위") { result ="짐" };
    if (com == "바위" && mine == "바위") { result ="비김" };
    if (com == "바위" && mine == "보") { result ="이김" };
    
    if (com == "보" && mine == "가위") { result ="이김" };
    if (com == "보" && mine == "바위") { result ="짐" };
    if (com == "보" && mine == "보") { result ="비김" };
    
    
    obj_com.value = com;
    obj_result.value = result;
   
}
</script>
</head>

<body>
<table border="1px">
	<tr>
		<td>나:</td>
		<td>
			<input type="text" class="it" id="itMine"/>
		</td>
	</tr>
	<tr>
		<td>컴:</td>
		<td>
			<input type="text" class="it" id="itCom"/>
		</td>
	</tr>
	<tr>
		<td>결과:</td>
		<td>
			<input type="text" class="it" id="itResult"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="게임하기" onclick="myclick()"/>
		</td>
	</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.it {
	width: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){
	// 가위바위보!
	var com = "";
    var mine = $("#itMine").val();
    var result = ""
    
    var rnd = Math.random();
    
    if (rnd > 0.66) {
        com = "가위" ;
    } else if (rnd > 0.33) {
        com = "바위" ;
    } else {
    	com = "보" ;
    }
    console.log(com)
    
    if (com == "가위" && mine == "가위") { result ="비김" };
    if (com == "가위" && mine == "바위") { result ="이김" };
    if (com == "가위" && mine == "보") { result ="짐" };
    
    if (com == "바위" && mine == "가위") { result ="짐" };
    if (com == "바위" && mine == "바위") { result ="비김" };
    if (com == "바위" && mine == "보") { result ="이김" };
    
    if (com == "보" && mine == "가위") { result ="이김" };
    if (com == "보" && mine == "바위") { result ="짐" };
    if (com == "보" && mine == "보") { result ="비김" };
    
    
    $("#itCom").val(com);
    $("#itResult").val(result);
   
}

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});

    $(".it").bind("keyup", function (event) {
        if (event.key == "Enter") {
        	 myclick();
        }
    });
}); 
</script>
</head>

<body>
<table border="1px">
	<tr>
		<td>나:</td>
		<td>
			<input type="text" class="it" id="itMine"/>
		</td>
	</tr>
	<tr>
		<td>컴:</td>
		<td>
			<input type="text" class="it" id="itCom"/>
		</td>
	</tr>
	<tr>
		<td>결과:</td>
		<td>
			<input type="text" class="it" id="itResult"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="게임하기" id="btn" />
		</td>
	</tr>
</table>
</body>
</html>

📌별찍기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it_f, #it_l{
	width: 20px;
}
</style>
<script type="text/javascript">
function star(cnt){
	var ret = "";
	for(var i = 0; i<cnt; i++){
		ret += "*";
	}
	ret += "\n"
	return ret;
}

function myclick(){
	console.log("myclick");
	var obj_f = document.querySelector("#it_f");
	var obj_l = document.querySelector("#it_l");
	var obj_ta = document.querySelector("#ta");
	
		
	var a = obj_f.value;
    var b = obj_l.value;
    
    var aa = parseInt(a);
    var bb = parseInt(b);
    
    console.log(aa, bb);
	
    var txt = "";
    
    /* txt += "*\n";
    txt += "**\n"; */
    for(var i=aa; i <= bb; i++){
    	txt += star(i);
    }
    		
    obj_ta.value = txt;
}
</script>
</head>

<body>
<table border="1">
	<tr>
		<td>첫번째 별 수</td>
		<td>
			<input type="text" id="it_f"/>
		</td>
	</tr>
	<tr>
		<td>끝번째 별 수</td>
		<td>
			<input type="text" id="it_l"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="별빛이내린다아" onclick="myclick()"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<textarea id="ta" rows="10" cols="15"></textarea>
		</td>
	</tr>
	
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it_f, #it_l{
	width: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function star(cnt){
	var ret = "";
	for(var i = 0; i<cnt; i++){
		ret += "*";
	}
	ret += "\n"
	return ret;
}

function myclick(){
		
	var a = $("#it_f").val();
    var b = $("#it_l").val();
    
    var aa = parseInt(a);
    var bb = parseInt(b);
    
    var txt = "";
    
    /* txt += "*\n";
    txt += "**\n"; */
    for(var i=aa; i <= bb; i++){
    	txt += star(i);
    }
    
    $("#ta").val(txt);		
  
}

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});

    $(".star").bind("keyup", function (event) {
        if (event.key == "Enter") {
        	 myclick();
        }
    });
}); 
</script>
</head>

<body>
<table border="1">
	<tr>
		<td>첫번째 별 수</td>
		<td>
			<input type="text" id="it_f" class="star"/>
		</td>
	</tr>
	<tr>
		<td>끝번째 별 수</td>
		<td>
			<input type="text" id="it_l" class="star"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="별빛이내린다아" id="btn" />
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<textarea id="ta" rows="10" cols="15"></textarea>
		</td>
	</tr>
	
</table>
</body>
</html>

📌야구게임

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
	width: 25px;
}
#mydiv{
	height: 200px;
}
</style>
<script type="text/javascript">

var com = "123";

function myclick(){
	console.log("myclick");

	var obj_it = document.querySelector("#it");
	var obj_div = document.querySelector("#mydiv");
	
    var mine = obj_it.value;
    
    var s = getStrike(com, mine);
    var b = getBall(com, mine);
    
    var str_new = mine + " " + s + "S" + b +"B"+"<br/>\n";
    var str_old = obj_div.innerHTML;
    
    obj_div.innerHTML = str_old + str_new;
    obj_it.value = "";
    
    if(s==3) {
    	setTimeout(function(){
    	alert("야구게임\n 당신이 이겼습니다")
    	},1);
    }
    
    console.log("s ", s,"b ", s)
}

function getStrike(com, mine){
	var cnt = 0
	var c1 = com.substring(0,1);
	var c2 = com.substring(1,2);
	var c3 = com.substring(2,3);
     
	var m1 = mine.substring(0,1);
	var m2 = mine.substring(1,2);
	var m3 = mine.substring(2,3);
     
    if (c1 == m1) cnt++;
    if (c2 == m2) cnt++;
    if (c3 == m3) cnt++;
     
    return cnt
}

function getBall(com, mine){
	var cnt = 0
	var c1 = com.substring(0,1);
	var c2 = com.substring(1,2);
	var c3 = com.substring(2,3);
     
	var m1 = mine.substring(0,1);
	var m2 = mine.substring(1,2);
	var m3 = mine.substring(2,3);
     
    if (c1 == m2 || c1 == m3) cnt++;
    if (c2 == m1 || c2 == m3) cnt++;
    if (c3 == m1 || c3 == m2) cnt++;
     
    return cnt
}

function setCom(){
	   
	var arr = [1,2,3,4,5,6,7,8,9];
    
	console.log(arr)
    
	for (var i = 0; i < 1000; i++) { 
		var rnd = parseInt(Math.random()*9);
		var a = arr[0];
        var b = arr[rnd];
        arr[0] = b 
        arr[rnd] = a   
	}	
	com = arr[0] + "" + arr[1] + "" + arr[2]; /* 문자로 바꿔주기 */
	console.log("com : ",com);
}
setCom();

</script>
</head>

<body>
<table border="1">
	<tr>
		<td>야구게임</td>
		<td>
			<input type="text" id="it" />
		</td>
	</tr>	
	<tr>
		<td colspan="2">
			<input type="button" value="맞추기" onclick="myclick()"/>
		</td>
	</tr>	
	<tr>
		<td colspan="2">
			<div id="mydiv"/>
		</td>
	</tr>	
	
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
	width: 25px;
}
#mydiv{
	height: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">

var com = "123";

function myclick(){

    var mine = $("#it").val();
    
    var s = getStrike(com, mine);
    var b = getBall(com, mine);
    
    var str_new = mine + " " + s + "S" + b +"B"+"<br/>\n";
    var str_old = $("#mydiv").html();
    
    $("#mydiv").html(str_old + str_new);
    $("#it").val("");
    
    if(s==3) {
    	// 방법 1
    	//setTimeout(() => alert("야구게임\n 당신이 이겼습니다"), 1);
    	
    	// 방법 2
    	//setTimeout((function(){ alert("야구게임\n 당신이 이겼습니다")})(),1);
    	
    	// 방법 3
    	setTimeout(() => {alert("야구게임\n 당신이 이겼습니다")}, 1);
    }
    
    console.log("s ", s,"b ", s)
}

function getStrike(com, mine){
	var cnt = 0
	var c1 = com.substring(0,1);
	var c2 = com.substring(1,2);
	var c3 = com.substring(2,3);
     
	var m1 = mine.substring(0,1);
	var m2 = mine.substring(1,2);
	var m3 = mine.substring(2,3);
     
    if (c1 == m1) cnt++;
    if (c2 == m2) cnt++;
    if (c3 == m3) cnt++;
     
    return cnt
}

function getBall(com, mine){
	var cnt = 0
	var c1 = com.substring(0,1);
	var c2 = com.substring(1,2);
	var c3 = com.substring(2,3);
     
	var m1 = mine.substring(0,1);
	var m2 = mine.substring(1,2);
	var m3 = mine.substring(2,3);
     
    if (c1 == m2 || c1 == m3) cnt++;
    if (c2 == m1 || c2 == m3) cnt++;
    if (c3 == m1 || c3 == m2) cnt++;
     
    return cnt
}

function setCom(){
	   
	var arr = [1,2,3,4,5,6,7,8,9];
    
	console.log(arr)
    
	for (var i = 0; i < 1000; i++) { 
		var rnd = parseInt(Math.random()*9);
		var a = arr[0];
        var b = arr[rnd];
        arr[0] = b 
        arr[rnd] = a   
	}	
	com = arr[0] + "" + arr[1] + "" + arr[2]; /* 문자로 바꿔주기 */
	console.log("com : ",com);
}


$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});

    $("#it").bind("keyup", function (event) {
        if (event.key == "Enter") {
        	 myclick();
        }
    });
	setCom();
}); 

</script>
</head>

<body>
<table border="1">
	<tr>
		<td>야구게임</td>
		<td>
			<input type="text" id="it" />
		</td>
	</tr>	
	<tr>
		<td colspan="2">
			<input type="button" value="맞추기" id="btn"/>
		</td>
	</tr>	
	<tr>
		<td colspan="2">
			<div id="mydiv"/>
		</td>
	</tr>	
	
</table>
</body>
</html>
profile
안녕하세요! 초보개발자 공부 시작!

0개의 댓글