javascript - 如果其他情况，更好的方法

Question

我有一个功能可以根据滑块的值更改背景颜色

有 35 种不同的颜色，我现在使用这个代码（当然它更长）

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

有没有办法缩短这个？

Answer 1

如果要增加 25，则制作一个颜色数组：

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

然后做一些数学运算，看看要使用哪个索引。

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

---

或者，如果您愿意：

color = colors[Math.floor(value / 25)];

Answer 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);

而且您的优势在于您不必编写大量的灰色阴影。

Answer 3

更多防弹版本（虽然不是完全防弹）

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

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

var color = colors[ Math.floor(value/25) ];

Answer 4

colors = {'#FFFFFF','#F8F8F8','#F0F0F0 '}
color=colors[(int)value/25];

您可能需要根据value.

Answer 5

抛弃&&and 级联

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
}

Answer 6

您可以使用描述颜色以及范围的最小值和最大值的对象数组，然后使用函数遍历数组以查找范围之间的颜色。

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;
}

通过一些额外的努力，您可以公开一种添加新颜色和范围的方法，为范围间隔设置默认值等。但是，如果您的颜色和范围间隔是固定的，那么这可能是矫枉过正。