生成随机种子十六进制颜色？

Posted 2023-02-25

【中文标题】生成随机种子十六进制颜色？

【英文标题】：Generate a random seeded hex color?

【发布时间】：2011-12-29 05:53:41

【问题描述】：

我正在使用'#'+Math.floor(Math.random()*16777215).toString(16); 在按键时生成随机的十六进制颜色。

这用于在按下小写字母键时更改背景颜色。

我想将此代码更改为由密钥代码播种。 我该怎么做？

我尝试了'#'+Math.floor(e.which*16777215).toString(16);，但这会生成一个 7 个字符的代码而不是 6 个？

【问题讨论】：

这和jQuery有什么关系？

基本上是因为该网站使用的是 jQuery，也许有人建议使用 jQuery 版本；)

哦，你的意思是：$.getRandomColour();？我很惊讶没有人建议 - 当然是there's a jQuery plugin for that。

【参考方案1】：

通过说您想要一个“种子”随机数，我假设您每次按下相同的键时都想要相同的颜色。不幸的是，您无法在 javascript 中控制 Math.random() 种子，因为它不像其他一些语言那样接受种子作为参数。

你可以生成一个随机的十六进制数字，如下所示：

Math.floor((Math.abs(Math.sin(seed) * 16777215))).toString(16);

这应该为 ASCII 范围内的所有内容生成一个唯一编号，但某些颜色可能非常相似。

function genColor (seed) 
  color = Math.floor((Math.abs(Math.sin(seed) * 16777215)));
  color = color.toString(16);
  // pad any colors shorter than 6 characters with leading 0s
  while(color.length < 6) 
    color = '0' + color;
  

  return color;


let tablehtml = '';

for (let i=32; i < 127; i++) 
  color = genColor(i);
  tableHTML += `<tr style="background:#$color"><td>$String.fromCharCode(i)</td><td>#$color</td></tr>`;


tableHTML = `<table>$tableHTML</table>`;

$('#test').bind('keypress', function (evt) 
    $(this).css('background', '#' + genColor(evt.which));

);
$('body').append(tableHTML);

#out, p, input  margin: 1em 
table border-collapse: separate
td padding: 1em; border: 3px solid #fff; color: #fff; text-shadow: 0px 0px 3px #000

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="out">Type in the input box to change its background color :<input id="test">
    <p>Below is a list of colors generated for ASCII 32 through 126</p>
</div>

【讨论】：

嘿，很棒的解决方案！我知道这已经很长时间了，但是您不能避免 % 步骤，因为您使用的是始终属于 [-1, 1] 的 sin 吗？使用 abs 还可以保证输出始终属于 [0, 1] * 0xffffff。

@afe 你说得对，感谢您指出。我已经更新了答案。

【参考方案2】：

您收到7 字母代码，因为您使用的数字不能以十六进制表示为6 字符。

16777215 (base 10) 在 base 16 中是 FFFFFF。如果您的十进制数字变大任意，则会使用另一个十六进制字母/数字来表示它。

要使您的代码正常工作，只需确保 16777215 是最高的。

222 似乎是可能的最高键码（如果我弄错了，请纠正我）：

Math.floor(e.which * 16777215 / 222).toString(16);

【参考方案3】：

一个简单易用的 JavaScript 是这样的：

function getRandomColor() 
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) 
            color += letters[Math.round(Math.random() * 15)];
        
        return color;
    

你可以在这里看到它的工作原理：http://sweb1.dmit.nait.ca/~bkoepke1/Random%20Colour%20Generator/

【讨论】：

OP 已经有生成随机颜色值的代码。他们正在询问如何修改它以使颜色值取决于按下的键，这无济于事。

Math.floor( Math.random() * 16 ) 是首选。 Math.random() 生成 [0,1) 中的数字 – 1 除外。您的版本以其他数字的一半概率返回 0 和 15。

【参考方案4】：

十六进制颜色代码具有从 00 到 FF 的 3 个组件，它们连接在一起形成一个字符串。它不仅仅是一个 6 个字符的十六进制数字。所以随机颜色生成器会是这样的：

function randomHexColor() 
    var x, c = '#';
    var i = 3;
    while (i--) 
     x = (Math.random()*256|0).toString(16).toUpperCase();
     c += (x.length < 2? '0' : '') + x;
    
    return c;

根据需要添加种子。

【讨论】：

随机 6 个字符的十六进制数和 3 个随机的 2 个字符的十六进制数连接在一起绝对没有区别，除非随机数生成器有问题，而这实际上并不能回答 OP 的问题问题。

@MuMind—是的，你是对的，其中组件是 00 到 FF，而 000000 到 FFFFFF。也许我被小数点 0 到 255 的范围分心了。