Question

我有一个名字列表，通常是从sql更新，在html5中，是否可以使用javascript或jquery使相同的名称颜色相同...

我尝试将字符串转换为十六进制，但我无法将其转换为颜色代码。

...问候

Answer 1

好的，假设你没有任何特定的颜色，我使用随机颜色生成器功能。

您可以做的是循环您的名称列表，并为每个新名称在字典中存储新的颜色值。然后，您可以在此词典中查看已使用的名称并获得相同的颜色。

例如：

假设你的html如下：

<ul></ul>

您可以使用此javascript：

var names = [
    "Bill", "Joe", "Oliver", "Joe", "George", "Bill", "George", "John"];
var currentAssignments = {};

for (var i = 0; i < names.length; i++) {
    var name = names[i];
    var colour = currentAssignments[name];
    if (!colour) {
        colour = GetRandomColour();
        currentAssignments[name] = colour;
    }
    var li = $("<li>").html(name).css("color", colour);
    $("ul").append(li);
}

function GetRandomColour() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

Here is a working example

或者，如果您有预定义的颜色数组（假设您确定有足够的独特颜色来满足所有名称），您可以这样做：

var colours = ["#F00", "#0F0", "#00F"];

并替换GetRandomColour()函数，如下所示：

function GetRandomColour() {
    return colours.pop();
}

Here is an example

Answer 2

我是这样做的。

创建一个带有名称并吐出随机颜色的函数，但它不是真正随机的，因为它使用名称来创建颜色，因此它将始终返回相同名称的相同颜色：

function nameToColor(name) {
    var n = 'abcdefghijklmnopqrstuvwxyz'.split('');
    var r = name.split('').map(function(e) {return n.indexOf(e);}).join('');
    var l = parseFloat( '0.'+ (r*r*1000).toString().replace(/^0/, ''));
    return '#'+Math.floor(l*16777215).toString(16);
}

FIDDLE

如何使用javascript将字符串转换为十六进制颜色

2 个答案: