728x90
jq08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
#it{
width: 40px;
}
#my_div{
height: 300px;
}
</style>
<script type="text/javascript">
var com = "123";
function getS(com, mine){
var ret = 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) ret++;
if(c2==m2) ret++;
if(c3==m3) ret++;
return ret;
}
function getB(com, mine){
var ret = 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) ret++;
if(c2==m1 || c2==m3) ret++;
if(c3==m1 || c3==m2) ret++;
return ret;
}
function myclick(){
var obj_mine =$("#it");
var obj_div = $("#my_div");
var mine = obj_mine.val();
var s = getS(com,mine)
var b = getB(com,mine)
console.log(s);
console.log(b);
var str_new = mine + "\t" +s +"S" + b+"B"+"<br>";
var str_old = obj_div.html();
obj_div.html(str_new + str_old);
obj_mine.val("");
if(s==3){
setTimeout(function(){
alert("맞췄습니다.");
}, 0);
}
//setintervael , timout , clerinterval
//settimeout 이 사용하기 더 쉬움
}
function ranC(){
var arr = [1,2,3,4,5,6,7,8,9];
for(var i=0; i<1000; i++){
var rnd = parseInt(Math.random()*9)
var a = arr[0]
arr[0] = arr[rnd]
arr[rnd] = a
}
com = arr[0]+""+arr[1]+""+arr[2];
console.log("com",com);
}
$(function(){
ranC();
$('#btn').bind('click',function(){
myclick()
})
})
</script>
</head>
<body>
EX08
<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="my_div"></div>
</td>
</tr>
</table>
</body>
</html>
스트라이크에 숫자 3개를 입력후 맞춰보기를 해서 컴퓨터가 내는 숫자를 맞춘다
맞췄을때 화면
'Python > Muzi' 카테고리의 다른 글
| Jquery강화학습07. 홀짝 게임만들기 (0) | 2023.07.13 |
|---|---|
| Jquery강화학습06. 별찍기 (0) | 2023.07.13 |
| Jquery강화학습05. 전화기 만들기 (0) | 2023.07.12 |
| Jquery강화학습04. 구구단 생성해서 출력하기 (0) | 2023.07.12 |
| Jquery강화학습03. 로또번호 생성하기 (0) | 2023.07.12 |
