0

#redデザインするCSSとCSSの幅の計算にjavascriptを使用し#yellowています。はhtml：

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

<style>
  #gray {
    width:100px;
  }
  #red {
    background-color:red;
    float: left;
  }
  #yellow {
    background-color: yellow;
    float:left;
  }
</style>

の色を塗りつぶすために、幅はパーセンテージで計算され#grayます。asを考慮したため、表示は と の幅の合計が as#red以下になるまで適切#yellowです。合計が 100% を超えると、カラー バーが 2 行で表示されます。合計が 100% を超えた場合の幅を計算して、バーが 1 行になり、超えた場合の指標として点線を表示できますか。私が何を意味するのか不明な場合は、私に尋ねてください。基本的に、両方を同じ行に配置し、一方を他方の下に配置したくない100%div #gray100% width#gray100% width#yellow#red

編集 ：

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

幅はデータの変更に伴って動的に変更され、データに変更があるたびに計算されます。私が言いたいことを理解しやすくするために、以下に3つの画像を添付しました。最初の画像では、幅の合計が 100% を超えているため、#yellow以下になります#red。緑色の背景は の幅です#gray。幅の合計が 100%#yellowを下回らないようにしたいのです#redが、2 番目の画像のように、3 番目の画像のように 100% の制限を超えた点に点線が表示されるようにする必要があります。これが私の問題を説明するのに役立つことを願っています。

これは、<code>#red</code> と <code>#yellow</code> の幅の合計が 100% より大きい場合の状況です。

これは、幅 0f <code>#red</code> と <code>#yellow</code> の合計が 100% に等しい場合です。

最終出力表示

4

2 に答える 2

0 
<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

jQueryはplace it inside $(document).ready()

var w_red=$("#red").outerWidth(true);
var w_yellow=$("#yellow").outerWidth(true);
$("#gray").width(w_red+w_yellow);

あなたの更新によると

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);
var factor=1.0;
if( (config.Usage + config.Used)>100 )
{
 factor=(config.Usage + config.Used)/100;
 config.Usage= Math.round(config.Usage / factor);
 config.Used=100-config.Usage;
}


$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

このように±1の誤差が生じます。しかし、それははるかに優れています。

于 2012-05-28T10:35:27.280 に答える
0

私は次のようにしました：

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

var rem=Math.round(100-(futureNum + recNum));
if(rem<0){
    $('#red').css('width',config.Used+'px');            
    $('#yellow').css('width',config.Usage+'px');
    $('#gray').css('width',(futureNum + recNum)+'px');
}else{
    $('#red').css('width',config.Used+'%');         
    $('#yellow').css('width',config.Usage+'%');
}

より良い提案をいただければ幸いです。

于 2012-05-28T14:45:17.147 に答える