로또 생성
더보기
더보기
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 |