5
 dd { 
    /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
 }

 dd div.blue { 
    /*position: relative; */
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
 }

HTML:

<dd>
    <div class="blue" style="width:35%;"> 
</dd>

これにより、白いバーが作成され、35% の青色で塗りつぶされます。

ここで、SAME プログレス バーに 2 つの異なる値を入力したいと思います。たとえば、値 A が 30% で値 B が 40% の場合、バーの 70% が塗りつぶされますが、それぞれのパーセンテージは色の違いでわかります。値 A と B は、2 つの異なるものがあり、それぞれがどれだけ占有しているかを「確認」できる限り、バー上で任意の順序で表示できます。

助言がありますか?

ありがとう。

4

4 に答える 4

-1
<div style="height: 5px; background-color: green; width: 100%;">
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div>
</div>  

それとその後:

$('#progress_bar').css('width', '30%');
于 2013-01-18T16:27:30.877 に答える