javascript 在聊天应用程序中为新用户提供独特的独特颜色生成器

Question

我想适应这样的东西：

http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html

但是对于每个新用户都会获得新的最独特颜色的聊天应用程序。

每次用户进入我的聊天应用程序时，我的服务器都会响应一个新的递增数字。 （此代码运行良好）。

所以第一个用户得到一个零，第二个用户得到一个等等。

我想把这个数字与最独特的颜色相匹配。

感谢您的帮助。

下面是链接中的代码

 function rainbow(numOfSteps, step) {
 // This function generates vibrant, "evenly spaced" colours (i.e. no   clustering). This is ideal for creating easily distinguishable vibrant  markers in Google Maps and other apps.
 // Adam Cole, 2011-Sept-14
 // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
 var r, g, b;
 var h = step / numOfSteps;
 var i = ~~(h * 6);
 var f = h * 6 - i;
 var q = 1 - f;
 switch(i % 6){
    case 0: r = 1, g = f, b = 0; break;
    case 1: r = q, g = 1, b = 0; break;
    case 2: r = 0, g = 1, b = f; break;
    case 3: r = 0, g = q, b = 1; break;
    case 4: r = f, g = 0, b = 1; break;
    case 5: r = 1, g = 0, b = q; break;
 }
 var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
return (c);

}

Answer 1

好的，这是我能为你做的最好的事情了。我使用您提供的彩虹方法。我创建了一组颜色。我洗牌阵列。当一个新用户加入时，我从数组中弹出一个值。如果超出限制，您可以处理创建新数组的逻辑。例如，当用户离开时，您可以将他们的颜色重新添加到数组中，或者像队列一样将其添加到前面。

function rainbow(numOfSteps, step) {
  var r, g, b;
  var h = step / numOfSteps;
  var i = ~~(h * 6);
  var f = h * 6 - i;
  var q = 1 - f;
  switch(i % 6){
    case 0: r = 1, g = f, b = 0; break;
    case 1: r = q, g = 1, b = 0; break;
    case 2: r = 0, g = 1, b = f; break;
    case 3: r = 0, g = q, b = 1; break;
    case 4: r = f, g = 0, b = 1; break;
    case 5: r = 1, g = 0, b = q; break;
  }
  var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
  return (c);
}

//fisher-yates shuffle:
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

//create a number of random colors:
var steps = 100;
var colors = [];
for(var i = 0; i < steps; i++) {
  colors.push(rainbow(steps, i));
}
shuffleArray(colors);


function newUser() {
  var color = colors.pop();
  var div = document.createElement('div');
  div.style.display = "inline-block";
  div.style.width = "10px";
  div.style.backgroundColor = color;
  div.innerHTML = "u";
  document.getElementById('container').appendChild(div);
}

<button onclick="newUser();">add new user</button>
<div id="container"></div>

Answer 2

下面的代码示例采用不超过 16777215 的任意数字并显示一种颜色。使用增量生成的用户编号的主要缺点是，为每个编号生成的颜色与前面的编号仅略有不同，这对于区分用户不是很理想。

如果您不需要生成的颜色在访问者之间可重复或一致，我建议您随机生成一个数字（如下所示），而不是从用户的数字中派生出来。

document.getElementById("input").value = ((16777215 * Math.random()) % 16777215) >>> 0;
(function() {
  var output = document.getElementById("output");
  var input = document.getElementById("input");
  input.onkeyup = updateDiv;

  function updateDiv() {
    var num = (+(input.value)).toString(16); // obtain hex code for color
    var comp = (0xffffff ^ +(input.value)).toString(16); // obtain complement of the color to make sure text is visible
    while (num.length < 6) {
      num = "" + "0" + num;
    }
    while (comp.length < 6) {
      comp = "" + "0" + comp;
    }
    output.innerHTML = "" + num;
    output.style.backgroundColor = "#" + num;
    output.style.color = "#" + comp;
  }
  updateDiv();
})();
document.getElementById("max").innerHTML = parseInt(0xffffff, 10);

#output {
  height: 200px;
  width: 200px;
}

<input id="input"></input>
<div id="output">&nbsp;</div>max color:
<div id="max" />