<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개
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 630 | 19년 전 | 2333 | ||
| 629 |
 ⓦangcho |
19년 전 | 1998 | |
| 628 |
ⓦangcho |
19년 전 | 3100 | |
| 627 |
ⓦangcho |
19년 전 | 2013 | |
| 626 |
ⓦangcho |
19년 전 | 2058 | |
| 625 |
ⓦangcho |
19년 전 | 1707 | |
| 624 |
ⓦangcho |
19년 전 | 2209 | |
| 623 | 19년 전 | 2186 | ||
| 622 |
 뜨락의이름 |
19년 전 | 2494 | |
| 621 |
ⓦangcho |
19년 전 | 2883 | |
| 620 |
ⓦangcho |
19년 전 | 2389 | |
| 619 | 19년 전 | 2452 | ||
| 618 | 19년 전 | 3503 | ||
| 617 |
 Elbis |
19년 전 | 3219 | |
| 616 |
Elbis |
19년 전 | 3209 | |
| 615 |
Elbis |
19년 전 | 3022 | |
| 614 |
Elbis |
19년 전 | 2030 | |
| 613 |
Elbis |
19년 전 | 2355 | |
| 612 |
Elbis |
19년 전 | 2227 | |
| 611 |
Elbis |
19년 전 | 2065 | |
| 610 |
Elbis |
19년 전 | 2502 | |
| 609 |
Elbis |
19년 전 | 2413 | |
| 608 |
Elbis |
19년 전 | 2802 | |
| 607 | 19년 전 | 2181 | ||
| 606 | 19년 전 | 3503 | ||
| 605 | 19년 전 | 1974 | ||
| 604 | 19년 전 | 2578 | ||
| 603 | 19년 전 | 1600 | ||
| 602 |
 Dream |
19년 전 | 2827 | |
| 601 | 19년 전 | 3069 | ||
| 600 |
 빨간망토의비밀 |
19년 전 | 2152 | |
| 599 | 19년 전 | 1992 | ||
| 598 | 19년 전 | 2466 | ||
| 597 | 19년 전 | 2379 | ||
| 596 |
ⓦangcho |
19년 전 | 3068 | |
| 595 |
ⓦangcho |
19년 전 | 6744 | |
| 594 | 19년 전 | 2703 | ||
| 593 | 19년 전 | 3179 | ||
| 592 |
 damoa.biz |
19년 전 | 3079 | |
| 591 |
ⓦangcho |
19년 전 | 1918 | |
| 590 | 19년 전 | 3359 | ||
| 589 | 19년 전 | 2196 | ||
| 588 |
ⓦangcho |
19년 전 | 2698 | |
| 587 | 19년 전 | 2338 | ||
| 586 |
 cunic |
19년 전 | 4351 | |
| 585 | 19년 전 | 2471 | ||
| 584 | 19년 전 | 2742 | ||
| 583 |
ⓦangcho |
19년 전 | 3507 | |
| 582 |
ⓦangcho |
19년 전 | 3709 | |
| 581 |
ⓦangcho |
19년 전 | 3234 | |
| 580 | 19년 전 | 2471 | ||
| 579 | 19년 전 | 3045 | ||
| 578 | 19년 전 | 3935 | ||
| 577 | 19년 전 | 3787 | ||
| 576 | 19년 전 | 1727 | ||
| 575 |
ⓦangcho |
19년 전 | 2191 | |
| 574 |
 happycommunity |
19년 전 | 5396 | |
| 573 | 19년 전 | 6702 | ||
| 572 | 19년 전 | 2551 | ||
| 571 | 19년 전 | 2101 | ||
| 570 | 19년 전 | 2593 | ||
| 569 | 19년 전 | 3272 | ||
| 568 | 19년 전 | 3506 | ||
| 567 | 19년 전 | 2978 | ||
| 566 | 19년 전 | 2588 | ||
| 565 |
ⓦangcho |
19년 전 | 4702 | |
| 564 |
ⓦangcho |
19년 전 | 6710 | |
| 563 |
ⓦangcho |
19년 전 | 4980 | |
| 562 |
ⓦangcho |
19년 전 | 5936 | |
| 561 |
ⓦangcho |
19년 전 | 2674 | |
| 560 |
ⓦangcho |
19년 전 | 2509 | |
| 559 |
ⓦangcho |
19년 전 | 2208 | |
| 558 |
ⓦangcho |
19년 전 | 2289 | |
| 557 | 19년 전 | 4582 | ||
| 556 |
 Photofly |
19년 전 | 4649 | |
| 555 | 19년 전 | 2491 | ||
| 554 | 19년 전 | 2168 | ||
| 553 | 19년 전 | 2503 | ||
| 552 |
Photofly |
19년 전 | 3137 | |
| 551 | 19년 전 | 2926 | ||
| 550 |
Elbis |
19년 전 | 1884 | |
| 549 |
Elbis |
19년 전 | 1946 | |
| 548 |
Elbis |
19년 전 | 3135 | |
| 547 |
Elbis |
19년 전 | 2355 | |
| 546 |
Elbis |
19년 전 | 3609 | |
| 545 |
Elbis |
19년 전 | 2534 | |
| 544 |
Elbis |
19년 전 | 1842 | |
| 543 |
Elbis |
19년 전 | 2447 | |
| 542 |
Elbis |
19년 전 | 1713 | |
| 541 |
Elbis |
19년 전 | 1397 | |
| 540 |
Elbis |
19년 전 | 1524 | |
| 539 |
Elbis |
19년 전 | 1791 | |
| 538 |
Elbis |
19년 전 | 1568 | |
| 537 |
Elbis |
19년 전 | 1766 | |
| 536 |
Elbis |
19년 전 | 1554 | |
| 535 |
Elbis |
19년 전 | 1949 | |
| 534 |
Elbis |
19년 전 | 1834 | |
| 533 |
Elbis |
19년 전 | 1433 | |
| 532 |
Elbis |
19년 전 | 1432 | |
| 531 |
Elbis |
19년 전 | 1348 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기