-2

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

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

问候...

4

2 回答 2

2

好的，假设您没有任何特定的颜色，我使用随机颜色生成器功能完成了此操作。

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

例如：

假设您的 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);
}

这是一个工作示例

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

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

并将GetRandomColour()函数替换如下：

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

这是一个例子

于 2013-07-26T11:54:17.763 回答
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);
}

小提琴

于 2013-07-26T12:08:30.770 回答