<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQUERY연습</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
function clearCard(){
for(var i=1; i<=14; i++){
$("#c"+i).text("");
$("#c"+i).css("background-color","white");
}
}
$(document).ready(function(){
//번호생성
$("#bt1").click(function(){
clearCard();
for(var i=1; i<=14; i++){
$("#c"+i).text(Math.floor(Math.random()*100));
}
});
//짝홀 구분
$(".card").click(function(){
var num = parseInt($(this).text())
if( num % 2 == 0)
$(this).css("background-color","red")
else
$(this).css("background-color","blue")
});
//번호지우기
$("#bt2").click(function(){
for(var i=1; i<=14; i++){
$("#c"+i).text("");
$("#c"+i).css("background-color","white");
}
});
});
</script>
<style>
.box1{
border-radius: 10px;
border: 2px solid #73AD21;
background-color: #73AD21;
padding: 10px;
margin: 10px;
width: 400px;
height: 20px;
color: white;
text-align: center;
}
.box2{
padding: 10px;
margin: 10px;
width:400px;
text-align: center;
}
#msg{
width: 400px;
height: 100px;
margin: 10px;
padding: 10px;
text-align: center;
}
.card{
width: 45px;
height: 50px;
font-size: 30px;
text-align: center;
border: 1px solid #73ad21;
border-radius: 5px;
float: left;
margin: 5px;
}
img{
width: 200px;
height: 80px;
}
</style>
<body>
<form class="myform">
<div class="box1">
JQUERY제어
</div>
<div id="msg">
<div class="card" id="c1"></div>
<div class="card" id="c2"></div>
<div class="card" id="c3"></div>
<div class="card" id="c4"></div>
<div class="card" id="c5"></div>
<div class="card" id="c6"></div>
<div class="card" id="c7"></div>
<div style="clear:both"></div>
<div class="card" id="c8"></div>
<div class="card" id="c9"></div>
<div class="card" id="c10"></div>
<div class="card" id="c11"></div>
<div class="card" id="c12"></div>
<div class="card" id="c13"></div>
<div class="card" id="c14"></div>
<div style="clear:both"></div>
<p>
<input type="button" value="번호생성" id="bt1">
<input type="button" value="번호지우기" id="bt2">
</p>
</div>
</form>
</body>
<html>
</html>1.click을 사용할때의 문법을 명확히 이해하게되었다.
2.함수 사용을 정확히 알게 되었다.
float 를 쓰면 말그대로 위로 뜬거마냥 된다. 이런 속성을 제거하기 위해서는 clear:both 를 이용해야한다.
'프로그래밍 언어 > 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 예제2.주사위게임 (0) | 2020.09.29 |