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

最高の不透明度が100％で、最低の不透明度が10％の場合、必要なものは次のとおりです。

  1. 最大値を決定します。それを最大と呼びます。
  2. 最小値を決定します。それを分と呼びます。
  3. 各値に、不透明度の(10 + ((value - min) / (max - min)) * 90)パーセントを割り当てます。

より一般的には、不透明度が最も高く、不透明度がX最も低いY場合、式は(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 / maximum_value）* 100

この場合、不透明度は等間隔ではなく、値に比例します。つまり、値が1、2、および10の場合、この場合、1と2はどちらも10よりも不透明度がはるかに低くなります。

リストで最大の値を取得できる場合は、リスト内のすべての値を繰り返し処理して、「value」と「highest_value」を毎回実際の数値に置き換えることができます。

注意事項：

  • 場合によっては、highest_valueに1.0を掛けて、浮動小数点の除算を強制する必要があります。

  • リスト値を文字列から整数または浮動小数点数に変換する必要がある場合もあります

于 2012-12-05T18:08:01.613 に答える