javascript - 根据Javascript或jQuery中的数值数组生成3种主要颜色渐变

Question

表中的一列包含无序数值。每个td需要使用纯色绘制，以使列形成无序的渐变。

我创建了一个数字数组，其中包含顺序排列的那些值，现在我需要基于此值生成渐变数组，因此数组的每个值都将具有对应的纯色。

小数字必须为红色，中数字必须为黄色，大数字必须为绿色。所有这些颜色都从其自身平稳过渡到下一个。

因此，基本上，有序数组将具有有序的渐变，但是当我绘制列时，渐变将变得无序，因为列的值不是有序的。
我要达到的是该列中的“新月排名”渐变。

我该如何使用javascript或jQuery？

Answer 1

更新为问题之后的答案

我仍然认为我可以为您提供帮助。我 fork 并修改了我的原始JSFiddle，以显示其用法。 CSS保持相对不变。

听起来您想为每个梯度级别都具有特定的值，但是我仍然认为，在应用多级梯度时，移动的“条形”概念最有效。 IE从一种颜色变为另一种颜色。这是因为如果您需要修改渐变颜色，则工作量会大大减少，因为您只需更改CSS中的背景线性渐变代码，并且无论您有多少行，它都能为您提供最平滑，最真实的渐变。 JSFiddle仍然具有输入框，因此您可以看到渐变的每个“步骤”。就像我之前说过的，您可以访问www.colorzilla.com/gradient-editor/之类的网站，并根据需要修改渐变色，甚至说如果您不喜欢从黄色到绿色的过渡，则在中间添加一个色标。 。

这是您需要将表中的所有值输入到多维数组中的jQuery代码。将其放入数组后，您可以对数组中的每一列进行排序(因为每一列都是数组中自己的数组)，并根据该数组中的“等级”或索引移动背景。由于我的理解是您希望基于最低值(value)到最高值(value)进行排序，而不是说0到100。

//jQuery for table
$("#someTable td").wrapInner("<span class='tdData'></span>");
$(".tdData").wrap("<div class='css3gradient'></div>");

var colVal = [];
var numCol = $("#someTable").find('tr')[0].cells.length;
var numRows = $("#someTable tr").length - 1; //subtract if header
var itemCount = 0;
var gradientWidth = $(".css3gradient").css("width").replace(/[^-\d\.]/g, '')-$(".tdData").css("width").replace(/[^-\d\.]/g, '');

//initialize array
for (var i = 0; i < numCol; i++) {
    colVal[i] = new Array();
}

//fill multidimensional array
$("table tr td").each(function () {
    curCol = itemCount % numCol;
    colVal[curCol].push($(this).text());
    itemCount++;
});

//sort values in array and assign value for gradient
for (i = 0; i < numCol; i++) {
    //sort values as numbers
    colVal[i] = colVal[i].sort(function (a, b) {
        return a - b;
    });
    //match each value in the array in order with value in table
    $.each(colVal[i], function (index, value) {
        $("#someTable td:nth-child(" + (i + 1) + ")").each(function () {
            if ($(this).text() == colVal[i][index]) {
                //Multiply current index with 
                ///Divide the total width of gradient box with
                ////Subtract total number of rows with one to make zero the first left position 
                ////and the last number the final position
                $(this).find(".css3gradient").css({ backgroundPosition: '-' + (index * (gradientWidth / (numRows - 1))) + 'px 0' });
            }
        });
    });
}

如果我误解了一些内容，请再次发表评论。这确实是一个非常有趣的问题，希望我能帮助或至少向正确的方向迈出了一步。

原始答案

我为您制作了 JSFiddle，应该可以帮助您入门。以下说明。

据我了解，您希望div / span / input中的背景根据该div / span / input中的值更改颜色。您希望较低的数字表示红色，并且希望使用渐变将颜色从红色>黄色>绿色更改为绿色，绿色是最大颜色。您还希望它由jQuery控制。

为此，我们可以堆叠几个div，并利用定位和溢出来“隐藏”我们用于背景的任何多余的div。

首先，建议您使用 http://www.colorzilla.com/gradient-editor/上的CSS Gradient Generator来生成CSS代码。

接下来，让我们看一下数据的结构。您将需要3个元素才能使其正常工作。
保存数据的内部元素。在我的示例中，我使用了input元素，因此您可以更改值并进行测试。
您需要的下一个元素是一个div，您可以将其用作“背景”。该元素将绝对定位，因此我们可以将其从左向右移动以获得所需的渐变。
最后，您需要使用外部包装的div，以便可以利用溢出CSS规则将多余的div隐藏在背景div中。

因此，作为引用，以下是此特定任务的html外观:

<div class=“data”><div class=“css3gradient”><input /></div></div>

如果您无权访问HTML，则快速解决方案是使用.wrap()jQuery函数。例如，如果您只有一个外部div和输入，则可以将输入“换行”为

$(“.data input”).wrap(“<div class=“css3gradient”></div>”);

在数学上，对于div梯度，尝试使其“对齐”可能会有点儿怪异。对于我的示例，我只是使用了一个总宽度来显示100px的数据，而将渐变背景的总宽度显示为1100px;。在背景上额外设置100px的原因是，当您将元素移动10时，您需要额外的宽度来填充剩余的div。 IE零位占据​​0-100，第二位占据200-300，最后第十位占据1000-1100。通过使渐变div的宽度为(x * 10)+ x，可以将此方法应用于任何宽度。

这也会从您将数据从0变为100的 Angular 来查看数据，就像您在执行％s一样。

因此对于我的CSS来说，它是这样的:

.css3gradient{
    width:1100px;
    height:100px;
    position:absolute;

    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff0000 0%, #ffff00 50%, #00ff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ffff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* IE10+ */
    background: linear-gradient(to right,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */

}

.data {
    width: 100px;
    height: 50px;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    margin: 3px;
}

.data input {
    width: 100px;
    height: 50px;
    background: transparent;
    border: 0;
    text-align: center;
}

最后，有趣的部分。我们实际上必须根据输入中的值移动此背景。我不确定您是否有某种输入或动态方式来更改每个元素中的值。无论如何，这个jQuery会让您入门。

$(".data input").each(function(){

    var dataValue = $(this);
    //call this initially set the background based on the value
    changeColor(dataValue.val());

    //this is what allows the background to change dynamically when you type into the input element
    dataValue.bind("keyup change input",function(){      
       changeColor(dataValue.val());
    });


    function changeColor(e) {
        var mulitplyColor = e * 10;
        dataValue.parent(".css3gradient").css({backgroundPosition: '-' + mulitplyColor + 'px 0'});
    }
});

希望这可以帮助!