<style>
.g_width, .g_height {width: 100%;}
.g_width td:first-child { width: 10%}
.g_width div { background-color: blue; height: 20px}
.g_height tr:first-child td {height: 300px; vertical-align: bottom}
.g_height div { background-color: blue; width: 20px}
</style>
<table id="graph1" class="g_width">
<tr><td>국어</td><td></td></tr>
<tr><td>영어</td><td></td></tr>
<tr><td>수학</td><td></td></tr>
</table>
<table id="graph2" class="g_height">
<tr><td></td><td></td><td></td></tr>
<tr><td>국어</td><td>영어</td><td>수학</td></tr>
</table>
<script>
function Graph(label) {
this.obj = document.getElementById(label);
this.begin = []; this.end = []; this.div = []; this.vertexes = [];
}
Graph.prototype.display = function(i, way) {
var _this = this, timer= [];
timer[i] = setInterval(function () {
if (_this.begin[i] >= _this.end[i]) clearInterval(timer[i]);
if (way == 'w')
_this.div[i].style.width = _this.begin[i] + '%';
else
_this.div[i].style.height = _this.begin[i] + '%';
_this.begin[i] +=1;
}, 30);
};
Graph.prototype.draw = function(way) {
way == 'w' ? this.width() :this.height();
for (var i=0; i<this.vertexes.length; i++) {
this.begin[i] = 1;
this.end[i] = this.vertexes[i];
this.display(i, way);
}
}
Graph.prototype.width = function() {
for (var i=0; i<this.obj.rows.length; i++) {
var cell = this.obj.rows[i].cells[1];
this.div[i] = document.createElement('div');
cell.appendChild(this.div[i]);
}
}
Graph.prototype.height = function(l) {
for (var i=0; i<this.vertexes.length; i++) {
var cell = this.obj.rows[0].cells[i];
this.div[i] = document.createElement('div');
cell.appendChild(this.div[i]);
}
}
var graph1 = new Graph('graph1');
graph1.vertexes = [10, 90, 40];
graph1.draw('w');
var graph2= new Graph('graph2');
graph2.vertexes = [50, 20, 80];
graph2.draw('h');
</script>
댓글 1개
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 530 |
 Elbis |
19년 전 | 1232 | |
| 529 |
Elbis |
19년 전 | 1414 | |
| 528 |
Elbis |
19년 전 | 1978 | |
| 527 |
사랑과우정
|
19년 전 | 2389 | |
| 526 | 19년 전 | 2870 | ||
| 525 |
 ⓦangcho |
19년 전 | 2296 | |
| 524 |
 damoa.biz |
19년 전 | 1804 | |
| 523 | 19년 전 | 7039 | ||
| 522 |
ⓦangcho |
19년 전 | 3729 | |
| 521 | 19년 전 | 2340 | ||
| 520 | 19년 전 | 2375 | ||
| 519 | 19년 전 | 2872 | ||
| 518 |
 jepae |
19년 전 | 5782 | |
| 517 |
jepae |
19년 전 | 5558 | |
| 516 |
jepae |
19년 전 | 2260 | |
| 515 |
jepae |
19년 전 | 3297 | |
| 514 | 19년 전 | 2867 | ||
| 513 | 19년 전 | 2218 | ||
| 512 |
개발자관리자
|
19년 전 | 2729 | |
| 511 |
개발자관리자
|
19년 전 | 1585 | |
| 510 |
개발자관리자
|
19년 전 | 1741 | |
| 509 |
개발자관리자
|
19년 전 | 1846 | |
| 508 |
개발자관리자
|
19년 전 | 2009 | |
| 507 |
개발자관리자
|
19년 전 | 1687 | |
| 506 |
개발자관리자
|
19년 전 | 1808 | |
| 505 |
개발자관리자
|
19년 전 | 1776 | |
| 504 |
개발자관리자
|
19년 전 | 1856 | |
| 503 |
개발자관리자
|
19년 전 | 1521 | |
| 502 |
개발자관리자
|
19년 전 | 2651 | |
| 501 | 19년 전 | 1998 | ||
| 500 | 19년 전 | 3238 | ||
| 499 | 19년 전 | 3270 | ||
| 498 | 19년 전 | 2526 | ||
| 497 | 19년 전 | 2602 | ||
| 496 | 19년 전 | 2444 | ||
| 495 | 19년 전 | 2700 | ||
| 494 | 19년 전 | 2680 | ||
| 493 | 19년 전 | 3182 | ||
| 492 | 19년 전 | 2896 | ||
| 491 | 19년 전 | 5309 | ||
| 490 |
Wangcho |
19년 전 | 2127 | |
| 489 |
Wangcho |
19년 전 | 2213 | |
| 488 |
Wangcho |
19년 전 | 2008 | |
| 487 |
Wangcho |
19년 전 | 1946 | |
| 486 |
Wangcho |
19년 전 | 1940 | |
| 485 |
Wangcho |
19년 전 | 2141 | |
| 484 |
뜨락의이름 |
19년 전 | 3215 | |
| 483 |
뜨락의이름 |
19년 전 | 3095 | |
| 482 |
뜨락의이름 |
19년 전 | 2855 | |
| 481 |
뜨락의이름 |
19년 전 | 2548 | |
| 480 |
뜨락의이름 |
19년 전 | 2633 | |
| 479 |
뜨락의이름 |
19년 전 | 2297 | |
| 478 |
뜨락의이름 |
19년 전 | 2328 | |
| 477 |
개발자관리자
|
19년 전 | 1591 | |
| 476 |
개발자관리자
|
19년 전 | 2310 | |
| 475 |
개발자관리자
|
19년 전 | 2659 | |
| 474 |
개발자관리자
|
19년 전 | 2659 | |
| 473 |
개발자관리자
|
19년 전 | 2969 | |
| 472 | 19년 전 | 2737 | ||
| 471 | 19년 전 | 1729 | ||
| 470 | 19년 전 | 1828 | ||
| 469 |
뜨락의이름 |
19년 전 | 2729 | |
| 468 |
jepae |
19년 전 | 2222 | |
| 467 |
뜨락의이름 |
19년 전 | 3996 | |
| 466 |
뜨락의이름 |
19년 전 | 2511 | |
| 465 | 19년 전 | 2379 | ||
| 464 | 19년 전 | 3527 | ||
| 463 |
뜨락의이름 |
19년 전 | 3101 | |
| 462 |
뜨락의이름 |
19년 전 | 2243 | |
| 461 |
뜨락의이름 |
19년 전 | 3037 | |
| 460 |
뜨락의이름 |
19년 전 | 2240 | |
| 459 |
뜨락의이름 |
19년 전 | 3105 | |
| 458 |
뜨락의이름 |
19년 전 | 3531 | |
| 457 |
뜨락의이름 |
19년 전 | 5214 | |
| 456 |
뜨락의이름 |
19년 전 | 3135 | |
| 455 |
스마일미디어
|
19년 전 | 3132 | |
| 454 |
스마일미디어
|
19년 전 | 2720 | |
| 453 |
스마일미디어
|
19년 전 | 2465 | |
| 452 |
스마일미디어
|
19년 전 | 2722 | |
| 451 |
스마일미디어
|
19년 전 | 2448 | |
| 450 |
스마일미디어
|
19년 전 | 2566 | |
| 449 |
스마일미디어
|
19년 전 | 2365 | |
| 448 |
스마일미디어
|
19년 전 | 2692 | |
| 447 | 19년 전 | 2960 | ||
| 446 |
스마일미디어
|
19년 전 | 3244 | |
| 445 |
스마일미디어
|
19년 전 | 7048 | |
| 444 |
스마일미디어
|
19년 전 | 5170 | |
| 443 |
스마일미디어
|
19년 전 | 2428 | |
| 442 |
스마일미디어
|
19년 전 | 5164 | |
| 441 |
스마일미디어
|
19년 전 | 3102 | |
| 440 |
damoa.biz |
19년 전 | 2463 | |
| 439 | 19년 전 | 2158 | ||
| 438 | 19년 전 | 3567 | ||
| 437 |
 imgstory |
19년 전 | 2869 | |
| 436 |
 cunic |
19년 전 | 3250 | |
| 435 |
cunic |
19년 전 | 2892 | |
| 434 | 19년 전 | 3384 | ||
| 433 |
sjsjin
|
19년 전 | 2712 | |
| 432 |
sjsjin
|
19년 전 | 3455 | |
| 431 |
sjsjin
|
19년 전 | 2417 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기