Question

我为Anchor CMS构建博客主题，我有一个关于随机为div分配背景颜色的问题。

我有一个工作脚本，它使用post类为每个div随机分配颜色。我想知道的是，如果我可以设置一次颜色 - 例如，当帖子发布时 - 并且它会在每个页面加载而不是重置时保持不变。

这是我的功能：

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

我认为我可以使用PHP在博客注册表中创建一个数组，并根据帖子ID将值传递给它，但是如果有的话，我不想让这个过程过于复杂化。更简单的方法。

一个不错的扩展，但不是必要的，是当用户访问它时将该颜色传递到帖子本身。

有什么想法吗？

修改 - 您可以看到我的demo site，了解主题的外观。现在，随机颜色的添加不在那里实现。

Answer 1

最初的一些注意事项：

并非所有颜色都值得使用：所有可能的颜色都很多，但并非所有颜色在页面中看起来都很漂亮（想想所有非常暗的颜色，灰色阴影等）。
即使你对它们的颜色保持一定的亮度，保持它们可辨别也是一个好主意（例如00FF00和00FE00非常相似，而且一个人甚至不会注意到）
你需要创建一个＆＃34;值得的＆＃34;颜色。让我们说你想要25种不同的颜色（我认为在第1点和第2点是公平的）。因此每个RGB的3个不同的选择是3 ^ 3 = 27减2，因为当所有三个都在最大值并且当所有三个都在最小时它将是灰色的（不好）。
所以你需要一个参数，范围从1到25，在所有帖子中足够随机或一个顺序参数（自动增量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+")")

HERE A FIDDLE IF YOU WANT TO PLAY WITH THEM COLOURS

修改

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

Answer 2

您可以使用发布帖子的一年中的某一天（0 - 365）作为hsl颜色的第一个值（0 - 360，您可以在360后的5天内选择一个随机数）

我认为使用hsl()也是一个更安全的选择。你会知道你不会得到完全可怕的东西，颜色会有点类似。这是一个小型演示......

http://jsbin.com/kagube/1/edit?html,css,output

Answer 3

注意，

可能存在“错误”

(Math.random()*0xFFFFFF<<0).toString(16)

有时，生成的字符串的length偶尔可能是5，而不是6，导致没有background-color的元素应用于元素' style;即，

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);

快速修复解决方案包含在

下面

尝试

HTML

<!-- 
     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>

JS

// 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])
});

jsfiddle http://jsfiddle.net/guest271314/f895bh53/

随机设置`background-color`属性一次

3 个答案: