7位必须的javascript随机颜色

Question

我发现以下很棒的脚本可以用 javascript 创建随机颜色。

var randColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

我对这个脚本的唯一问题是它不能保证它返回一个正常的 7 位十六进制字符串。

有时它只有 6 位数字，例如 #e1d19。

有没有办法强制 7 位十六进制值？

感谢您的帮助。

编辑：这是我的实际问题：

function randColor() {
    var randColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    return randColor;
}

for (var i=0; i<100; i++) {
    $("#colorpicker").append("<div class='color' title="+randColor()+" style='background:"+randColor()+"'></div>");
}

我正在创建具有随机颜色的小 div，当我单击它们时，我会获取它们的标题属性并为我的身体背景着色。

但是目前我的代码以

结尾

<div style="background:rgb(176, 249, 252);" title="#8bc47d" class="color"></div>

所以当我获取标题属性时，我给身体的颜色与小 div 显示的颜色不同。

Answer 1

没有人发布它，这是我获得随机颜色的最短代码。

'#'+Math.random().toString(16).slice(-6)

• 它会得到一个随机浮点数 0.437920...
• 将其转换为十六进制，您将得到类似 0.7c13b41830e33 的内容
• 取最后 6 个字符，这将为您提供随机颜色#

简单易懂、简短高效。

Answer 2

var randColor = '#'+(0xFFFFFFFF-Math.random()*0xFFFFFFFF).toString(16).substr(0, 6);

Answer 3

您希望它是六位数，而不是七位数，但生成的字符串应该是七个字符长，包括哈希。吹毛求疵，我知道，但仍然。这个怎么样：

var color = (Math.random() * 0xFFFFFF << 0).toString(16);
"#" + String(color + "000000").slice(0, 6);

如果你想在开头填充，应该这样做：

var color = (Math.random() * 0xFFFFFF << 0).toString(16);
"#" + String("000000" + color).slice(-6);

为了澄清，这将填充 整个 字符串，而不是单独的通道。我在想，由于您没有对每个通道进行随机化，因此实际上只有您要填充的红色或蓝色通道（可能是红色，即第二个 sn-p）。

您的第二个问题是您调用 randColor 两次，给您两种不同的颜色。您需要将生成的颜色存储在一个变量中，然后使用该变量两次。

for (var i=0; i<100; i++) {
    var color = randColor();
    $("#colorpicker").append("<div class='color' title=" + color + " style='background:" + color + "'></div>");
}

Answer 4

您可以自己填充：

function randomColor() {
  var rc = (~~(Math.random() * 0xFFFFFF)).toString(16);
  return '#' + new Array(7 - rc.length).join('0') + rc;
}

这招：

new Array(n).join(char)

是一种在字符串中获取“char”的n - 1 副本的方法。我从 7 而不是 6 中减去值的原始长度，这样当字符串长度为 5 个字符时，我得到一个零，当 4 时得到两个，等等。

edit - 当然（如其他答案中所述）您也可以像这样获得填充零：

  return '#' + "000000".slice(rc.length) + rc;

我必须做一件愚蠢的 jsperf 事情来看看哪个更快:-)

Answer 5

我认为最好的办法是制作 3 组 2 位十六进制数字（R、G 和 B 各一组）。然后，只需用 0 向左填充，以确保它们都是两位数。也许像我提供的这个未经测试的代码以供参考:)

//I am GUESSING that this is how you get a 2-digit hex value ranging 0-255
var r = PadDigits(Math.random()*0xFF<<0).toString(16),2);
var g = PadDigits(Math.random()*0xFF<<0).toString(16),2);
var b = PadDigits(Math.random()*0xFF<<0).toString(16),2);

var randColor = '#'+r+g+b;

function PadDigits(n, totalDigits) 
{ 
    n = n.toString(); 
    var pd = ''; 
    if (totalDigits > n.length) 
    { 
        for (i=0; i < (totalDigits-n.length); i++) 
        { 
            pd += '0'; 
        } 
    } 
    return pd + n.toString(); 
} 

Answer 6

这是我的（低技术）尝试：

var randColor = (Math.random()*0xFFFFFF<<0).toString(16);
while( randColor.length < 6 ) {
    randColor = '0' + randColor;
}
randColor = '#' + randColor;