Jquery 随机设置“背景色”属性一次

我正在为创建一个博客主题，我有一个关于随机为div分配背景色的问题

我有一个工作脚本，随机分配一个颜色给每个div和post类。我想知道的是，我是否可以设置颜色一次——比如，当文章发布时——并让它在每个页面加载时保持不变，而不是重新设置

以下是我的功能：

$(".post").each(function randomColor() {
        var color = "#"+(Math.random()*0xFFFFFF<<0).toString(16);
        $(this).css("background-color", color)
      })

我想我可以使用PHP在blog注册表中创建一个数组，并根据post ID将值传递给它，但是如果有一个更简单的方法，我不想使这个过程过于复杂

一个很好的扩展，但不是必需的，就是在用户访问帖子时将这种颜色带到帖子本身

有什么想法吗

---

编辑-您可以查看我的主题，了解主题的外观。目前还没有实现随机颜色添加。

首先需要考虑以下几点：

并不是所有的颜色都值得使用：所有可能的颜色都很多，但并不是所有的颜色在页面上都看起来很好看——想想那些非常暗的颜色，灰色的阴影等等

即使你对它们的颜色保持一定的亮度，保持它们的可分辨性也是一个好主意，例如00FF00和00FE00非常相似，人们甚至不会注意到

你需要创建一个有价值的颜色子集。假设你想要25种不同的颜色，我认为这在第1点和第2点是公平的。所以每个RGB有3个不同的选择，3^3=27减去2，因为当三个都在最大值，三个都在最小值时，会变成灰色，这不好

所以你需要一个从1到25的参数，在所有帖子中都是随机的，或者一个连续的参数，一个自动递增的ID？因此，在重新开始之前，使用整套可能的颜色

编辑

---

编辑颜色范围以获得更好的颜色。

您可以使用一年中的日期0-365发布文章作为hsl颜色0-360中的第一个值，您可以为360后的5天选择一个随机数

我认为使用hsl也是一种更安全的选择。你会知道你不会得到完全糟糕的东西，而且颜色会有点相似。这里有一个小演示

---

注意，可能存在错误

---

Math.random*0xfffffffffffffff颜色应该有多独特？您可以根据帖子的内容对颜色进行散列，或者根据帖子的时间为rng设定种子。可能性是无穷的。即使你创建了数组，你也必须存储它。如果你已经有一个数据库，你可以把它存储在那里。但是，如果你存储的是将永远使用的颜色，为什么不直接选择颜色并硬编码呢？或者你可以在一个巨大的静态CSS文件中使用预先选择的随机颜色执行一系列操作：nth-child387。你知道这篇文章发布的时间戳吗？我喜欢这个，我感谢你的解释。我不能，为了我的生命，弄清楚如何通过编程获得帖子ID。你是说如何将postID从PHP变量获取到JS？如果是这样的话，在post标记中，您可以像下面这样将id作为属性进行回显

postID = /* get your post ID as int */

/* gets a number between 1 and 25 from your post ID */
colourID = (postID % 25) + 1 

/* this tells which "step" to use for each colour */
/* i.e. 20 in base 3 is "202" -> (2*9 + 0*3 + 2*1) = 18 + 2 = 20 */
/* so will keep "step 2" for red, "step 0" for green and "step 2" for blue */
base3ColourID = colourID.toString(3) 

/* this always returns 3 digits */
/* base3ColourID is 1 if ID is 1, we need "001" to have the colour "steps" */
niceB3CID = ("000").substring(base3ColourID.length) + base3ColourID 

/* calculate the actual colours */
red = 65 + 70*(parseInt(niceB3CID.charAt(0)))
green = 65 + 70*(parseInt(niceB3CID.charAt(1)))
blue = 65 + 70*(parseInt(niceB3CID.charAt(2)))

$('.post').css('background-color', "rgb("+red+","+green+","+blue+")")

var arr = [], res = []; 
for (i = 0; i < 100; i++) {
  arr.push((Math.random()*0xFFFFFF<<0).toString(16));
};

$.each(arr, function(k, v) {
  if (v.length < 6) {
    res.push(v);
  }
});

console.log(res.length);

<!-- 
     given each "inner-container" element 
     within `.post` "outer-container"
     has some form of `unique-id` -->
<div class="post">
    <span id="a"></span>
    <span id="b"></span>
    <span id="c"></span>
    <span id="d"></span>
    <span id="e"></span>
    <span id="f"></span>
    <span id="g"></span>
    <span id="h"></span>
</div>

// this piece could actually be run when the "post" ,
// or element , is generated , instead of each occasion
// the document is loaded .
// the `colors` array could be stored at server , 
// as `json` object ,e.g., "colors.json", or other preferred format ,
// updating when new "post" is created / generated .
// the array generated could contain two members :
// the unique "id" of the "post" , and the color
// associated with that `unique-id`
// the data could then be posted to server
// which updates `colors.json` file with
// new entries
var colors = [];
    $(".post span").each(function(i, el) {
        // `bug` : occasionally returns string having 
        // `length` of `5` , instead of `6`
        var r = ((Math.random()*0xFFFFFF<<0).toString(16));
        // _quickix_ : check `length` of `r` string ,
        // if `< 6` , generate random "number" between 0-9 ,
        // concat to `r`
        r = r.length < 6 ? r + (1 + Math.floor(Math.random() * 9)) : r;
        var color = "#" + r ;

        // apply `color` to `background-color` , here ,
        // if desired
        // $(el).css("background-color", color);

        // push `unique-id , color` pair to `colors` array
        colors.push([el.id, color]);

        // optional , `POST` new `colors` array to server ,
        // adding new entry to `colors.json` ,
        // unique for each `unique-id`
        // $.post("colors.php", {"data" : colors});
      });

// when loading "template" of `html` `.post` "posts" ,
// having unique id's , or , being generated dynamically
// and given `unique-id`'s , apply `color` to each element
// based on `unique-id` and `color` generated for it
// when created

// optional : `$.getJSON("colors.json", function(colors) {});`
// having `$.each()` function at `complete` callback 
// reassembly `colors` associated with `unique-id`'s
$.each(colors, function(k, v) {
   $(".post span[id="+v[0]+"]").css("background-color", v[1])
});