<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
.box1{
border-radius: 25px;
border: 2px solid green;
text-align: center;
background-color: green;
color: white;
width: 500px;
height: 40px;
padding-top: 20px;
}
.box2{
width: 500px;
text-align: center;
margin-top: 10px;
}
.box3{
margin:10px;
padding: 10px;
font-size: 14px;
color: red;
text-align: center;
}
.card{
width: 60px;
height: 60px;
border: 2px solid #73ad21;
border-radius: 5px;
margin: 5px;
padding-top: 6px;
font-size: 25px;
float: left;
padding: 10px;
}
#msg{
border-radius: 5px;
border:2px solid #73ad21;
padding:10px;
margin: 10px;
width: 470px;
height: 50px;
font-size: 30px;
text-align: center;
float: left;
}
p{
color: red;
}
.cardclear{
clear: both;
}
</style>
<script>
var arr ;
var sum = 0;
var cnt = 0;
function init() {
sum = 0;
cnt = 0;
$("#msg").text("");
$(".box3").text("");
}
$(document).ready(function(){
//카드보기
$("#bt1").click(function(){
//초기화
init();
//공백 확인
if ($("#txt1").val() == "") {
alert("숫자 목록을 입력하세요!");
$("#txt1").focus();
return;
}
//숫자목록인지 확인 즉 ,포함인지 확인
if ($("#txt1").val().indexOf(",") < 0 ){
alert("숫자사이에 ,를 입력하세요!");
$("#txt1").focus();
return;
}
//숫자카드가 만들어 졌는지 확인
if ($(".box3").text() != ""){
alert("이미 숫자목록이 만들어져 있습니다.\n 다시 생성하겠습니다!");
}
//숫자 목록을 배열로 만들기
arr = $("#txt1").val().split(",");
//숫자 목록의 숫자가 3개 미만인지 확인
if(arr.length < 3) {
alert("카드 개수는 3개이상이어야합니다!");
$("#txt1").focus();
return;
}
//숫자 목록 분리 >> 배열 >> 화면에 카드형식으로 보여주기
var htmlStr = "";
var cnt = 0;
for (var i =0; i<arr.length;i++){
htmlStr=htmlStr+"<div class='card'>"+arr[i]+"</div>";
cnt++;
if (cnt % 5 == 0) {
htmlStr = htmlStr+"<div class='cardclear'></div>" ;
}
}
$(".box3").html(htmlStr);
});
$("#bt2").click(function(){
arr.sort(function(a,b){
return a-b;
});
//오름차순 정렬
var htmlStr = "";
var cnt = 0;
for (var i =0; i<arr.length;i++){
htmlStr=htmlStr+"<div class='card'>"+arr[i]+"</div>";
cnt++;
if (cnt % 5 == 0) {
htmlStr = htmlStr+"<div class='cardclear'></div>" ;
}
}
$(".box3").html(htmlStr);
});
$(".box3").on("click",".card",function(){
if (cnt >= 3){
return;
//3번클릭 이상일 때 stop 시키기
}
//배경색 확인
if ($(this).css("background-color") == "rgb(255, 255, 0)") {
return;
}
$(this).css("background-color","yellow");
//박스요소 클릭시 css 변경
sum = sum + parseInt($(this).text());
cnt++;
var str = $("#msg").text()+$(this).text();
if (cnt == 3 ) {
str = str + " = " +sum ;
}
else{
str = str + " + " ;
}
$("#msg").text(str);
//box에 덧셈 구현
});
//카드지우기
$("#bt3").click(function(){
init();
});
});
</script>
</head>
<body>
<form name="myform">
<div class="box1">
카드만들기
</div>
<div class="box2">
카드내용 <input type="text" name="txt1" id="txt1">
<p style="color:red">
(,로 구분된 카드목록이나 카드 개수를 입력하세요.)
</p>
<input type="button" value="카드보기" id="bt1">
<input type="button" value="정렬하기" id="bt2">
<input type="button" value="지우기" id="bt3">
</div>
<div id="msg">
</div>
<div class="box3" style="clear: both;"></div>
</form>
</body>
</html>1.clear:both; 는 float를 막아주는 역할을 한다!
2.오름차순으로 정렬하기위해서는
arr.sort(function(a,b){
return a-b;} 이런식으로 코딩을 작성해야한다.
3.return; 을 하면 함수가 그 뒤는 실행되지않고 거기서 종료된다 약간 break 같음
4. onclick 은 동적 으로 새롭게 만들어진것에 사용하기 용이하고, 특정 속성을 구체적으로 지목해 event 를 생성할 때 필요하다. (click 과의 차이)
'프로그래밍 언어 > Java' 카테고리의 다른 글
| 안드로이드 스튜디오<button> background 적용 안되는 오류 해결 (0) | 2021.10.01 |
|---|---|
| 유투브로 음악 player 만들기 jquery 예제6 (0) | 2020.10.15 |
| 자바스크립트 jquery 예제4.지뢰찾기게임 (0) | 2020.10.06 |
| jqeury 예제3. 가위바위보 게임만들기 (0) | 2020.09.30 |
| jquery 예제2.주사위게임 (0) | 2020.09.29 |