1

スライダーの値に応じて背景色を変更する機能があります

35 種類の色があり、現在はこのコードを使用しています (もちろん、より長くなります)。

if (value < 25) {
    color = '#FFFFFF';
} else if (value > 25 && value < 50) {
    color = '#F8F8F8';
} else if (value > 50 && value < 75) {
    color = '#F0F0F0 ';
}

これを短くする方法はありますか？

4

6 に答える 6

3

25 ずつインクリメントする場合は、色の配列を作成します。

var colors = ['#FFFFFF', '#F8F8F8', '#F0F0F0 ', ... ]

次に、少し計算して、使用するインデックスを確認します。

color = colors[(value - (value % 25)) / 25];

または、必要に応じて:

color = colors[Math.floor(value / 25)];
于 2013-02-24T18:48:20.493 に答える
1

次のようなことを行うことで、配列なしで 2 行のステートメントにすることができます。

var rgbvalue = 255-Math.floor(value/25);
var color = 'rgb('+rgbvalue+','+rgbvalue+','+rgbvalue+');';

もちろん、rgbvalue が 0 より小さくならないように値を制限する必要がありますが、可能な値を知っていれば、簡単にそれを行うことができると思います。より速く暗くしたい場合は、次のように Math.floor 演算の結果を乗算できます。

var rgbvalue = 255-(Math.floor(value/25)*5);

また、グレーの濃淡の膨大な配列を記述する必要がないという利点もあります。

于 2013-02-24T18:54:26.373 に答える
1

より防弾バージョン（ただし、完全には防げません）

var colors = ['#FFFFFF','#F8F8F8','#F0F0F0'];

/* this is not that necessary */
var value = input_value || default_input_value;

var color = colors[ Math.floor(value/25) ];
于 2013-02-24T18:55:44.030 に答える
0 
colors = {'#FFFFFF','#F8F8F8','#F0F0F0 '}
color=colors[(int)value/25];

の範囲によっては、これを調整する必要がある場合がありますvalue。

于 2013-02-24T18:46:11.010 に答える
0

&&代わりにカスケードを捨ててください

if(values > 75){
  //anything above 75 falls here
} 
else if(value > 50){
  //anything <= 75 but > 50 falls here
} 
else if(values > 25){
  //anything <= 50 but > 25 falls here
} 
else {
  //anything <= 25 falls here
}
于 2013-02-24T18:46:25.813 に答える
0

色と範囲の最小値と最大値を記述するオブジェクトの配列を使用してから、関数を使用して配列を反復処理し、範囲間の色を見つけることができます。

function getColor(value) {

    var colorRanges = [
        { color : '#FFFFFF', min : 0, max : 25 },
        { color : '#F8F8F8', min : 25, max : 50 },
        { color : '#F0F0F0', min : 50, max : 75 }
    ],
    length = colorRanges.length;

    while(length--) {
        var colorRange = colorRanges[length];
        if (value >= colorRange.min && value < colorRange.max) {
            return colorRange.color;
        }
    }

    // default color
    return colorRanges[0].color;
}

もう少し努力すれば、新しい色や範囲を追加したり、範囲間隔のデフォルトを設定したりする方法を公開できます。ただし、色と範囲間隔が固定されている場合、これはおそらくやり過ぎです。

于 2013-02-24T18:54:19.230 に答える