この質問をして申し訳ありません、私は学校で注意を払っていませんでした...
3 と 7 の 2 つの数字があるとします。
両方の数値のパーセンテージ (100% のうち) を示すバーを作成したいと思います。つまり、これらの数値を計算すると、バーは次のように表示されます: IIIXXXXXXX
私が意味をなすことを願っています..事前に感謝します。
バーに 3 と 7 を相対値として表示し、それぞれが全体の適切な割合を占めることを意味していると思います
ⅢXXXXXXXX
計算は簡単です。
var total = 3 + 7;
var percentA = 3 / total; // 30%
var percentB = 7 / total; // 70%
各コンポーネントの幅は、棒の幅の合計に選択した値を掛け、値の合計で割った値です。
したがって、バーがたとえば 100px である必要がある場合、次のように 2 つのコンポーネントの幅を計算します。
var widthA = 100 * ( A / (A+B) );
var widthB = 100 * ( B / (A+B) );
または100 * ( 3 / (3+7) ) => 100 * (3/10) => 30
、および 70。
100からの数値のパーセンテージの物理的表現を求める場合は、パーセントを取得することから始めます。
int number = 3; //or 7
int percent = number/100;
次に、1ピクセルの大きさのスプライトを作成し、それに基づいてスケーリングしpercent
ます。たとえば、次のようになります。
mybarsprite.scale = percent*100;
次に、背景画像を追加してバーを作成し、それを100ピクセルにすることができます。同じ位置に両方のスプライトを追加します。より低いzレベルの背景のスプライトは、バーの影響を追加します。
これが1つの方法です(プログレスバープラグインから取得):
これは JavaScript ですが、もちろん言語は関係ありません。
var max = 250; // the total amount representing 100%
var current = $obj.val().length; // the length we are measuring
// important: current / max * 100
// use min() to ensure that the result isn't greater than 100 due to rounding
var ratio = Math.min( ( ( current / max ) * 100 ), 100 );
重要な部分は、現在の金額を合計金額で割ることです。ここで、合計金額は (それが何であれ) 100% を表します。その除算演算は 1 未満の値を生成する必要があります。それを 1-100 パーセンテージに変換するには、100 を掛けます。
上記の例では、current
= 125 でmax
= 250 の場合、125 / 250 = 0.5 になります。0.5 * 100 を掛けると 50 になります。125 は 250 の 50% です。
両方のパーセンテージを取得したい場合は、単純に最初の結果を 100 から差し引くことができます。
テキストボックスの最大長を管理するための HTML/CSS/jQuery プログレス バーの完全な動作例を次に示します: http://jsfiddle.net/QfZPt/1/