0

我正在使用 javascript 计算宽度#red和#yellowcss 来设计。是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。显示是正确的，直到宽度之#red和#yellow小于或等于100%as 因为我已经考虑了div #grayas 100% width。如果总和超过 100%，则颜色条显示为两行。当总和超过 100% 时，是否可以计算宽度，以便#gray条形与可能的虚线一起出现在一条线上，作为100% 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+'%');

宽度随着数据的变化而动态变化，并在数据有任何变化时计算。我在下面附上了三张图片，这样可以很容易地理解我的意思。对于第一张图像，宽度的总和大于 100%，#yellow如下所示#red。绿色背景是 的宽度#gray。我希望当宽度的总和增加 100% 时#yellow不应低于#red它，而是应该像第二张图像一样，带有视觉指示的点可能像第三张图像一样在 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 回答