본문 바로가기

파이썬/수업내용

[Python] web외 연동하여 로또 생성하기 / 구구단 / 가위바위보 / 전회번호 출력하기 / 야구게임

로또 생성

 

더보기
더보기

js02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
	var objs = document.getElementsByClassName("my_td");
	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];
		arr[0] = arr[rnd];
		arr[rnd] = a;
	}
	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="1px">
	<tr>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
	</tr>
	<tr>
		<td colspan="6">
			<input type="button" value="로또생성하기" onclick="myclick()"/>
		</td>
	</tr>
</table>
</body>
</html>

버블정렬을 한 후 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
	var objs = document.getElementsByClassName("my_td");
	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];
		arr[0] = arr[rnd];
		arr[rnd] = a;
	}
    
    //버블 정렬
	for(var i=0; i<=5; i++){
		for(var j=0; j<=5; j++){
			if(arr[i] < arr [j]){
	           var a = arr[i]
	           var b = arr[j]
	            arr[i] =b ;
	            arr[j] =a ;
			}
		}
	}
	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="1px">
	<tr>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
		<td class="my_td">__</td>
	</tr>
	<tr>
		<td colspan="6">
			<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;
}

#my_div{
	height: 200px;
}

</style>
<script type="text/javascript">
function myclick(){
	var obj_it = document.getElementById("it");
	var obj_div = document.getElementById("my_div");
	
	var dan = obj_it.value;
	var idan = parseInt(dan);
	//console.log(dan,9)//검은색은 문자열, 파란색을 숫자
	
	var txt = "";
	
	for(var i=1; i<=9; i++){
		txt += idan+"*"+i+"="+(i*idan)+"<br>";
	};
	
	obj_div.innerHTML = txt;
	
	
};
</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="my_div"></div>
		</td>
	</tr>
</table>
</body>
</html>

가위바위보

더보기
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it_my, #it_com, #it_result{
width: 30px;
}
</style>
<script type="text/javascript">
function myclick(){
	var obj_my = document.getElementById("it_my");
	var obj_com = document.getElementById("it_com");
	var obj_result = document.getElementById("it_result");
	
	var my = obj_my.value;
	var com = "";
	var result = "";

	var rnd = Math.random();
	
	if (rnd > 0.66){
	    com = "가위";
	}
	else if(rnd > 0.33)	{		
	    com = "바위";
	}
	else{
	    com = "보";	
	}
	if (com == "가위" && my == "가위") result = "비김";
	if (com == "가위" && my == "바위") result = "이김";
	if (com == "가위" && my == "보") result = "짐"  ;

	if (com == "바위" && my == "가위") result = "짐";
	if (com == "바위" && my == "바위") result = "비김";
	if (com == "바위" && my == "보") result = "이김"  ;
	
	if (com == "보" && my == "가위") result = "이김";
	if (com == "보" && my == "바위") result = "짐";
	if (com == "보" && my == "보") result = "비김"  ;
	
	obj_com.value = com;
	obj_result.value = result;
}
</script>
</head>
<body>
<table border="1">
	<tr>
		<td>나</td>
		<td>
			<input type="text" id="it_my">
		</td>
	</tr>
	<tr>
		<td>컴</td>
		<td>
			<input type="text" id="it_com">
		</td>
	</tr>
	<tr>
		<td>결과</td>
		<td>
			<input type="text" id="it_result">
		</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: 100px;
}
table{
	text-align: center;
}
</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" value="1" class="btn" onclick="myclick(this)"/></td>
			<td><input type="button" value="2" class="btn" onclick="myclick(this)"/></td>
			<td><input type="button" value="3" class="btn" onclick="myclick(this)"/></td>
		</tr>
		<tr>
			<td><input type="button" value="4" class="btn" onclick="myclick(this)"/></td>
			<td><input type="button" value="5" class="btn" onclick="myclick(this)"/></td>
			<td><input type="button" value="6" class="btn" onclick="myclick(this)"/></td>
		</tr>
		<tr>
			<td><input type="button" value="7" class="btn" onclick="myclick(this)"/></td>
			<td><input type="button" value="8" class="btn" onclick="myclick(this)"/></td>
			<td><input type="button" value="9" class="btn" onclick="myclick(this)"/></td>
		</tr>
		<tr>
			<td><input type="button" value="0" class="btn" onclick="myclick(this)"/></td>
			<td colspan="2">
				<input type="button" value="☎" class="btn" 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">

var com = "123";

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

	var obj_it = document.querySelector("#it");
	var obj_div = document.querySelector("#ta");
	
    var mine = obj_it.value;
    
    var s = getStrike(com, mine);
    var b = getBall(com, mine);
    
    var str_new = mine + " " + s + "S" + b +"B\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">
				<textarea id="ta" rows="15" cols="15"></textarea>
			</td>
		</tr>
	
	</table>
</body>
</html>

'파이썬 > 수업내용' 카테고리의 다른 글

[ Python] Flask - Ajax / Fetch / axios  (0) 2024.07.09
[Python] jquery  (0) 2024.07.09
[Python] Flask MVC 패턴을 이용하기  (0) 2024.07.05
[Python] Flask DB 연동하기  (0) 2024.07.05
[python] Flask  (0) 2024.07.04