Question

我需要根据值（在html中设置）更改li的不透明度。

所以，这是一个html的例子：

<ul>
    <li class="test">3</li>
    <li class="test">23</li>
    <li class="test">6</li>
    <li class="test">9</li>
    <li class="test">11</li>
    <li class="test">16</li>
    <li class="test">19</li>
</ul>

因此，最高值（23）的不透明度为100％，而下一个最高值（19）的百分比较低，等等。

最低值应为10％。

我可以做所有的JavaScript，我只是在努力计算。有没有人知道如何解决这个问题？

Answer 1

如果最高不透明度为100％且最低不透明度为10％，那么这就是您想要的：

确定最大值。最多叫它
确定最小值。叫它最小。
为每个值指定不透明度（10 +（（值 - 最小）/（最大 - 最小））* 90％。

更一般地说，如果最高不透明度为X且最低值为Y，则公式为（Y +（（值 - 最小）/（最大 - 最小））*（X - Y））。

Answer 2

这是公式：

percentage = 10 + (number - min)/(max - min)*90

Answer 3

获取最小值和最大值，然后您可以将不透明度计算为：

0.1 + 0.9 * (value - min) / (max - min)

演示：http://jsfiddle.net/Guffa/FBTBw/

Answer 4

我遇到了同样的问题并以这种方式解决了这个问题：

Array.prototype.toPercentage = function() {
  var arr = this
  return arr.map(function(d, i) {
    return (100 * d / arr.reduce((a, b) => a + b, 0)) | 0;
})}

使用方法：给定一个数组，计算数组中每个元素的百分比。

var nums = [23, 3, 19, 16, 10, 15]
// the percentage
var numsPercent = nums.toPercentage()

Answer 5

我可以想象一种简单的方法。让我们说你想要设置从20％到100％不透明度的所有内容（你可以稍后将其更改为由函数参数确定，但现在让它保持简单）。第一个目标是从列表中获取最大值和最小值：

var list = document.getElementsByTagName("ul")[0].children;
var min = Infinity, max = -Infinity;

for (var i = 0; i < list.length; i++) {
   var val = parseInt(list[i].innerText, 10);
   min = Math.min(min, val);
   max = Math.max(max, val);
}

现在，您应该线性地缩放每个的不透明度值，如此 -

var min_opacity = 20, max_opacity = 100;
for (var i = 0; i < list.length; i++) {
  var val = parseInt(list[i].innerText, 10);
  list[i].style.opacity = (min_opacity + ((val - min) / (max - min)) * (max_opacity - min_opacity)  + "%";
}

要扩展数学运算：这里的大部分工作是在[0,1]的间隔上得到一个数字，其中0代表最低值，1代表最高值。 “（val - min）/（max - min）”执行此缩放：从中减去min后，任何数字都不会大于“max - min”，并且一旦从中减去min，就不会小于零。

Answer 6

Percentage_value =（value / highest_value）* 100

在这种情况下，不透明度与值成比例，而不是等间距。换句话说，如果你的值是1,2和10，在这种情况下，1和2都会比10更不透明。

如果您可以获得列表中的最高值，那么您可以迭代列表中的所有值，每次用实际数字替换“value”和“highest_value”。

需要注意的事项：

您可能必须通过将highest_value乘以1.0来强制浮点除法
您可能还需要将字符串中的列表值转换为整数或浮点数

从一组数字中计算出一个百分比

6 个答案: