为输入范围生成红色和绿色之间的颜色 [英] Generate colors between red and green for an input range

问题描述

可能重复：

基于数字的颜色编码

能够从1-100的范围中选择，其中当数字变得小于50时，该区域的颜色变得更深的绿色，并且随着颜色变得更接近100，颜色变得更红。

I want for a user to be able to select from a range from 1-100, where as the numbers become less than 50, the color of the area becomes darker green, and as the color becomes closer to 100, the color becomes more red.

我试图让它的范围更靠近中心，颜色应该接近白色（其中50 =全白）。

I am trying to make it so that as the range in more towards the center, the color should be close to white (where 50 = full white).

我试过这里的答案：为功率计生成红色和绿色之间的颜色？没有效果... 50结束了一个混乱的绿色...

I tried the answer from here: Generate colors between red and green for a power meter? to no avail.... 50 ends up being a muddled green...

我有以下html：

<span><span class="value">50</span><input type="range" /></span>​

和以下javascript：

And the following javascript:

$(document).on({
    change: function(e) {

        var self = this,
            span = $(self).parent("span"),
            val = parseInt(self.value);
        if (val > 100) {
            val = 100;
        }
        else if (val < 0) {
            val = 0;
        }
        $(".value", span).text(val);
        var r = Math.floor((255 * val) / 100),
            g = Math.floor((255 * (100 - val)) / 100),
            b = 0;
        span.css({
            backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
        });
    }
}, "input[type='range']");​

小提琴： http://jsfiddle.net/maniator/tKrM9/1/

我尝试过许多不同的r，g，b组合，但我真的看起来不太对。

I have tried many different combinations of r,g,b but I really cannot seem to get it right.

推荐答案

我想出了这个答案，来自这里的一些帮助，它使用 Interpolate 函数，其中我可以轻松地设置开始和结束颜色。

I came up with this answer with some help from here, which uses an Interpolate function in which I can set the start and end colors easily.

function Interpolate(start, end, steps, count) {
    var s = start,
        e = end,
        final = s + (((e - s) / steps) * count);
    return Math.floor(final);
}

function Color(_r, _g, _b) {
    var r, g, b;
    var setColors = function(_r, _g, _b) {
        r = _r;
        g = _g;
        b = _b;
    };

    setColors(_r, _g, _b);
    this.getColors = function() {
        var colors = {
            r: r,
            g: g,
            b: b
        };
        return colors;
    };
}

$(document).on({
    change: function(e) {

        var self = this,
            span = $(self).parent("span"),
            val = parseInt(self.value),
            red = new Color(232, 9, 26),
            white = new Color(255, 255, 255),
            green = new Color(6, 170, 60),
            start = green,
            end = white;

        $(".value", span).text(val);

        if (val > 50) {
            start = white,
                end = red;
            val = val % 51;
        }
        var startColors = start.getColors(),
            endColors = end.getColors();
        var r = Interpolate(startColors.r, endColors.r, 50, val);
        var g = Interpolate(startColors.g, endColors.g, 50, val);
        var b = Interpolate(startColors.b, endColors.b, 50, val);

        span.css({
            backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
        });
    }
}, "input[type='range']");​

小提琴： http://jsfiddle.net/maniator/tKrM9/53/

这篇关于为输入范围生成红色和绿色之间的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！