CSS/JS以陰影​​作爲條形圖？

Question

我想用一個<td>單元格來直觀地「繪製」它旁邊單元格中的百分比。我會帶入百分比，並且想要像圖形欄那樣遮蔽它。有沒有人試圖做到這一點，並用CSS或JS功能做它會更容易嗎？我在頁面上使用html/php組合。

Answer 1

下面是一個如何完成的簡單示例。這真的只是一個基本的CSS的事情：

http://jsfiddle.net/e5wRA/1/

更新吧

的Javascript（jQuery的）：

var percent = 20; 

$('.bar').css({ 
    width: percent.toString() + '%' 
}); 

PHP：

<tr> 
    <td><?php echo $percent; ?>%</td> 
    <td class="graph"><div class="bar" style="width:<?php echo $percent; ?>%"></div></td> 
</tr> 

Answer 2

一般來說，’是使用CSS類來設計元素的一個好主意。然後使用Javascript來根據需要更改類名稱。此方法允許您將表示（CSS）與行爲（javascript）分開。