반응형
jQuery 를 이용하여 색깔이 변하는 테이블을 만들어 보도록 하겠습니다.
jQuery 를 이용하기 위해서는 다운 받아서 하는 방법 구글 api에 등록된 jQuery 모듈을 이용하는 방법이 있습니다.
다운을 받아서 만드는 방법은 업데이트 될때마다 모듈을 변경해 줘야 되고 그래서 여간 귀찮은게 아닙니다.
여기서는 그냥 구글 api를 쓰는 것으로 할려고 합니다.
https://developers.google.com/speed/libraries/?hl=ko-KR
호스팅된 라이브러리 | Hosted Libraries | Google for Developers
인기 있는 오픈소스 자바스크립트 라이브러리에 대해 Google에서 호스팅하는 콘텐츠 배포 네트워크에 포함된 라이브러리 목록을 가져옵니다.
developers.google.com
우선 가장 기본적인 HTML 파일을 만듭니다.
<html>
<head>
<title> 반짝이는 테이블 </title>
<meta charset= "utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
</body>
</html>
head 와 /head 사이에 가져올 jQuery 를 삽입합니다.
<html>
<head>
<title> 반짝이는 테이블 </title>
<meta charset= "utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
위와 같이 되었다면 이제 body에 테이블을 만들어 줍니다.
효과를 극대화 시키기 위해 셀이 여러 개인 것으로 만듭니다.
16 * 4개짜리로 만들었습니다.
<table border cellspacing="2" cellpadding="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
그런데 이렇게만 해 놓으면 어느 테이블인지 알기가 어렵습니다.
는 공백을 나타내는 html 입니다.
테이블에 정체성을 만들어 구분하기 위해 id 값을 넣어 줍니다.
저는 id 값을 tbl1 으로 정했습니다.
테이블의 셀을 정하지 않으면 구분이 어렵기 때문에 셀에 폭 정렬 및 기본색을 넣어 줍니다.
head 부분에 추가해 줍니다.
#tbl1 td { /* #이 붙으면 id 값 */
padding:3px; /*띄우는 공간*/
width:70px; /* 폭*/
height:70px; /* 높이*/
text-align:center; /*글자 가운데 정렬*/
background:#ffa301; /* 배경색*/
}
실행하면 아래와 같이 됩니다.
이제 위에서 연결된 jQuery를 이용하여 파일이 다 로드가 되었을 때 시행할 부분을 만들어 줍니다.
$(document).ready(function(){
});
테이블의 TD에 색깔을 넣기 위해 색의 값을 정합니다.
var colors = [
"rgb(248, 12, 18)",
"rgb(238, 17, 0)",
"rgb(255, 51, 17)",
"rgb(255, 68, 34)",
"rgb(255, 102, 68)",
"rgb(255, 153, 51)",
"rgb(254, 174, 45)",
"rgb(204, 187, 51)",
"rgb(208, 195, 16)",
"rgb(170, 204, 34)",
"rgb(105, 208, 37)",
"rgb(34, 204, 170)",
"rgb(18, 189, 185)",
"rgb(17, 170, 187)",
"rgb(68, 68, 221)",
"rgb(51, 17, 187)",
"rgb(59, 12, 189)",
"rgb(68, 34, 153)"
];
이제 시행할 부분을 만듭니다.
랜덤 함수를 이용합니다.
$("#tbl1 tr").children().each(function (e){
rnd = Math.floor(Math.random() * 200); // random 합수를 이용하여 난수를 발생시킨 다음 소숫점 아래를 버려 정수로 만듭니다.
i = colors.length - Math.round(rnd/16); // 만들어진 정수에서 다시 나누어 준 다음 반올림을 해 줍니다.
selectedcolor = colors[i]; // color 값을 할당 합니다.
$(this).text(i); // 위에서 만들어진 보여줄 숫자
$(this).css("background",selectedcolor); // 배경색을 바꿔줍니다.
});
테이블의 tr 의 아래 요소 (chidren) 를 배열화 하여 할당한다는 뜻입니다.
코드 전체를 새로 다시 정리하자면
<html>
<head>
<title> 반짝이는 테이블 </title>
<meta charset= "utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#tbl1 td { /* #이 붙으면 id 값 */
padding:3px; /*띄우는 공간*/
width:70px; /* 폭*/
height:70px; /* 높이*/
text-align:center; /*글자 가운데 정렬*/
background:#ffa301; /* 배경색*/
}
</style>
</head>
<body>
<table id="tbl1" border cellspacing="2" cellpadding="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var colors = [
"rgb(248, 12, 18)",
"rgb(238, 17, 0)",
"rgb(255, 51, 17)",
"rgb(255, 68, 34)",
"rgb(255, 102, 68)",
"rgb(255, 153, 51)",
"rgb(254, 174, 45)",
"rgb(204, 187, 51)",
"rgb(208, 195, 16)",
"rgb(170, 204, 34)",
"rgb(105, 208, 37)",
"rgb(34, 204, 170)",
"rgb(18, 189, 185)",
"rgb(17, 170, 187)",
"rgb(68, 68, 221)",
"rgb(51, 17, 187)",
"rgb(59, 12, 189)",
"rgb(68, 34, 153)"
];
$(document).ready(function(){
$("#tbl1 tr").children().each(function (e){
rnd = Math.floor(Math.random() * 200);
i = colors.length - Math.round(rnd/16);
selectedcolor = colors[i];
$(this).text(i);
$(this).css("background",selectedcolor);
});
});
//-->
</script>
</body>
</html>
결과화면은 아래와 같이 됩니다.
그런데 테이블의 색깔이 한번 바뀌고 맙니다.
그러므로 색깔이 계속 바뀌게 하기 위해서는 시간이 흘러가게 만들어 주어야 합니다.
setInterval 함수를 이용하면 시간을 흘러가게 할 수 있습니다.
사용법은 setInterval (함수, 시간) 입니다. 시간은 마이크로초입니다. 그러므로 1000의 값이 들어가면 1초입니다.
정리를 하기 위해 함수로 만들어 줍니다.
최종적인 코드는 아래와 같습니다.
<html>
<head>
<title> 반짝이는 테이블 </title>
<meta charset= "utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#tbl1 td { /* #이 붙으면 id 값 */
padding:3px; /*띄우는 공간*/
width:70px; /* 폭*/
height:70px; /* 높이*/
text-align:center; /*글자 가운데 정렬*/
background:#ffa301; /* 배경색*/
}
</style>
</head>
<body>
<table id="tbl1" border cellspacing="2" cellpadding="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var colors = [
"rgb(248, 12, 18)",
"rgb(238, 17, 0)",
"rgb(255, 51, 17)",
"rgb(255, 68, 34)",
"rgb(255, 102, 68)",
"rgb(255, 153, 51)",
"rgb(254, 174, 45)",
"rgb(204, 187, 51)",
"rgb(208, 195, 16)",
"rgb(170, 204, 34)",
"rgb(105, 208, 37)",
"rgb(34, 204, 170)",
"rgb(18, 189, 185)",
"rgb(17, 170, 187)",
"rgb(68, 68, 221)",
"rgb(51, 17, 187)",
"rgb(59, 12, 189)",
"rgb(68, 34, 153)"
];
function rndColor() {
$("#tbl1 tr").children().each(function (e){
rnd = Math.floor(Math.random() * 200);
i = colors.length - Math.round(rnd/16);
selectedcolor = colors[i];
$(this).text(i);
$(this).css("background",selectedcolor);
});
}
$(document).ready(function(){
setInterval(rndColor,1000);
});
//-->
</script>
</body>
</html>
실행을 하면 아래와 같이 나옵니다.
'웹프로그래밍 > javascript' 카테고리의 다른 글
| 로또번호가 몇 번 나왔을까? (0) | 2024.03.15 |
|---|---|
| 로또번호를 생성해 보자 (0) | 2024.03.15 |
| 자바스크립트로 구구단 짜기 (0) | 2024.03.07 |
