Question

很抱歉提出这个问题，我没有在学校注意......

说我有两个数字：3和7

我想创建一个显示两个数字百分比的栏（100％）换句话说，计算这些数字，所以条形图显示： IIIXXXXXXX

我希望我有意义..提前谢谢。

Answer 1

我认为你的意思是你想要一个条形显示3和7作为相对值，每个值占整个的适当百分比

IIIXXXXXXX

计算很简单：

var total = 3 + 7;
var percentA = 3 / total; // 30%
var percentB = 7 / total; // 70%

每个组件的宽度是总条形宽度乘以所选值并除以值的总和。

因此，如果条形图应该是100px，那么您将计算两个组件的宽度，如

var widthA = 100 * ( A / (A+B) );
var widthB = 100 * ( B / (A+B) );

或100 * ( 3 / (3+7) ) => 100 * (3/10) => 30，以及70。

Answer 2

这是一种方式（取自进度条插件）：

这是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/

Answer 3

如果您要求物理表示100的数字百分比，我将从获得百分比开始：

int number = 3; //or 7
int percent = number/100;

然后我会有一个精灵1像素大，并根据percent进行缩放，例如：

mybarsprite.scale = percent*100;

然后你可以添加一个背景图像来创建条形图并使其为100像素。在同一个位置添加两个精灵，在较低的z级别添加背景精灵，添加一个条形图。

计算两个数字

3 个答案: