1

我需要根据值（在 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。有谁知道如何解决这个问题？

4

7 回答 7

8

If the highest opacity is 100% and the lowest is 10%, then here's what you want:

  1. Determine the maximum value. Call it max.
  2. Determine the minimum value. Call it min.
  3. To each value, assign opacity (10 + ((value - min) / (max - min)) * 90) percent.

More generally, if the highest opacity is X and the lowest is Y, then the formula is (Y + ((value - min) / (max - min)) * (X - Y)).

于 2012-12-05T18:02:19.123 回答
3

这是公式：

percentage = 10 + (number - min)/(max - min)*90
于 2012-12-05T18:02:04.330 回答
2

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

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

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

于 2012-12-05T18:12:23.227 回答
1

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

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()
于 2017-10-07T04:34:25.617 回答
0

我可以想象一种简单的方法。假设您想要设置从 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，就不会小于零。

于 2012-12-05T18:13:37.693 回答
0 
const percentage = () => {
    let arr = [50, 3, 11.5, 25, 10, 15] 
    return arr.map((number) => ((number) / (50) * 100).toFixed())
  }

50 highest value
于 2021-09-21T14:17:53.270 回答
-1

Percentage_value = (value/highest_value)*100

在这种情况下，不透明度与值成比例，而不是等间距。换句话说，如果您的值是 1、2 和 10，那么在这种情况下，1 和 2 的不透明性都将远低于 10。

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

需要注意的事项：

  • 您可能必须通过将highest_value 乘以1.0 来强制浮点除法

  • 您可能还必须将列表值从字符串转换为整数或浮点数

于 2012-12-05T18:08:01.613 回答