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的任意数字并显示颜色。使用您逐渐产生的用户号码的主要缺点是，为每个号码生成的颜色仅与前一个号码略有不同，这对于区分用户彼此不是理想的。

如果您不希望所生成的颜色在访问者之间具有可重现性或一致性，我建议您随机生成一个数字（如下所示），而不是从用户的数字中获取该数字。<\ n / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

javascript独特的颜色生成器，适用于聊天应用程序中的新用户

2 个答案: