<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전역함수</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
.box1{
width: 230px;
border: 2px solid;
border-radius: 10px;
text-align: center;
background-color: greenyellow;
color: black;
}
.box2{
width: 250px;
}
#bt1{
text-align: center;
}
.box3{
width: 250px;
height: 90px;
border: 2px solid greenyellow;
text-align: center;
padding-top: 30px;
}
.box4{
border: greenyellow 2px solid;
width: 250px;
height: 80px;
padding-top: 30px;
text-align: center;
}
</style>
<script>
var clickCnt = 0; //전역변수로 click 횟수 지정
var winCnt = 0; //전역변수로 맞은 횟수 지정
$(document).ready(function(){
$("p>img").click(function(){
clickCnt++; //clickCnt 에 1씩 추가
var n = $(this).attr("src");
n = n.substr(11,1); //n 13번째 자리수에 있는것을 가져온다
n = parseInt(n); // int 로 바꿔준다
var com = Math.floor(Math.random()*6)+1; //1~6까지의 랜덤한 수를 com 변수에 넣기
$("#img1").attr("src", "hello.html\\"+n+".png"); //id=img1인 것의 src 속성값을 변경하기
$("#img2").attr("src", "hello.html\\"+com+".png");
var str = "";
if (n == com) {
str =str +"맞았습니다."+"<br>";
winCnt++;
}
else{
str = str +"틀렸습니다."+"<br>";
}
str = str +"전체 횟수 : "+clickCnt+"<br>";
str = str+"맞은 횟수 : "+winCnt;
$("#msg").html(str);
});
$("#bt1").click(function(){
$("#img1").attr("src","hello.html\\dsad.jpg")
$("#img2").attr("src","hello.html\\dsad.jpg")
$("#msg").html("")
clickCnt = 0; //전체횟수 초기화
winCnt=0; //맞은횟수 초기화
});
});
</script>
</head>
<form name="myform">
<div class="box1">
주사위게임
</div>
<div class="box2">
<p>
<img src="hello.html\1.png">
<img src="hello.html\2.png">
<img src="hello.html\3.png">
</p>
<p>
<img src="hello.html\4.png">
<img src="hello.html\5.png">
<img src="hello.html\6.png">
</p>
<p style="text-align: center;"><input type="button" value="다시하기" id="bt1"></p>
</div>
<div class="box3">
<img src="hello.html\dsad.jpg" style="width: 60px;" id="img1">
<img src="hello.html\vs.jpg" style="width: 60px;">
<img src="hello.html\dsad.jpg" style="width: 60px;" id="img2">
</div>
<P>
<div class="box4" id="msg" >
</div>
</P>
</form>
<body>
</body>
</html>배운점
1.
clickCnt++; 이라는 식으로 +1을 해준다는 걸 알았음.
2. attr()에 대해 이해하게 되었음.
속성을 가져온다는 뜻
3.전역변수와 지역변수를 이해하게 되었음.
전역변수는 코드 전체적으로 사용할 수 있음.
지역변수는 그 함수 내에서만 사용할 수 있음.
4.html / text 메소드의 차이를 알게되엇음
text는 글자만 쓸수 있고
html 은 <a>같은 tag 들도 넣을 수 있다.
'프로그래밍 언어 > Java' 카테고리의 다른 글
| 유투브로 음악 player 만들기 jquery 예제6 (0) | 2020.10.15 |
|---|---|
| Jqeury 예제5.카드게임 구현하기 (0) | 2020.10.10 |
| 자바스크립트 jquery 예제4.지뢰찾기게임 (0) | 2020.10.06 |
| jqeury 예제3. 가위바위보 게임만들기 (0) | 2020.09.30 |
| Jquery 예제1.랜덤 카드를 만들고 짝/홀 카드 구분하기 (0) | 2020.09.28 |