Question

我有javascript对象，其中包含8个对象。每个对象都有其对应的颜色信息。有没有办法用RGB颜色映射每个对象？

输入

myData[{a:29},{a:17},{a:26},a{19},a{18},a{40},a{89},a{14}];

输出：

myData[{a:29, color:#RGB},{a:17, color:#RGB},....];

Answer 1

一种方式：

<div class="superOuter">
    When there's not enough content:<br>
    <div class="outer">
        <div class="test">
            Rest with BFC
        </div><div class="test2">
            Fixed content
        </div>

    </div>
</div>
<br><br>
<div class="superOuter">
    I want it to look like this (that is unless the page shrinks)<br>
    <div class="outer">
        <div class="test">
            Larger text here and it makes the whole thing go to the big size which is what I want without all the text
        </div><div class="test2">
            Fixed Content
        </div>

    </div>
</div>

Answer 2

要知道的一个方便的事实是，＃000到#fff的颜色可以用十六进制中的数字0到4095表示。考虑到这一点，我们可以编写一个函数来生成范围内的颜色。

这是我写的，需要当前索引和最大段数：

function getColor(current, max) {
  var num = ((4095 / max * current) >>> 0).toString(16);
  while (num.length < 3) {
    num = "0" + num;
  }
  return "#"+num;
}

在这里你可以看到它的实际效果（在文本框中输入更大的数字，看看它将如何处理不同大小的数组）。

updateOutput();
document.getElementById("input").onkeyup = updateOutput;

function updateOutput() {
  var output = document.getElementById("output");
  var data = new Array(+document.getElementById("input").value);
  var len = data.length;
  output.innerHTML = "";
  while (len--) {
    var color = getColor(len, data.length);
    output.insertAdjacentHTML("afterbegin", "<li style='color:#" + color + "'>(#" + color + ")</li>");
  }
}

function getColor(current, max) {
  var num = ((4095 / max * current) >>> 0).toString(16);
  while (num.length < 3) {
    num = "0" + num;
  }
  return num;
}

<input type="text" id="input" value="8" />
<ol id="output" />

请注意，较低的数字通常更接近黑色，较高的数字通常更接近白色，但两者之间的颜色可能会根据分割的数量而有很大差异。例如，当您将4095分割成15个片段时，它们都会变成灰色阴影！

请记住，此方法对数组的长度设置了4095的任意大小限制。

每个对象的RGB映射

2 个答案: