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

抛弃&&并改为级联

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

通过一些额外的努力，您可以提供一种添加新颜色和范围的方法，具有范围间隔的默认值等。但是，如果您的颜色和范围间隔是固定的，那么这可能是过度的。

对于很多其他的更好的方式

6 个答案: