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

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

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

这是我的功能：

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

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

一个很好的扩展，但不是必要的，是当用户访问帖子时，将这种颜色转移到帖子本身

有什么想法吗？

编辑-您可以查看我的演示网站，了解主题的外观。到目前为止，随机颜色添加是，而不是。

最初的一些考虑事项：

并不是所有的颜色都值得使用：所有可能的颜色都很多，但并不是所有颜色在页面上都很好看（想想所有非常暗的颜色，灰色阴影等）。
即使你对它们的颜色保持一定的亮度，保持它们的可区分性也是个好主意（例如00FF00和00FE00非常相似，人们甚至不会注意到）
你需要创建一个子集的"有价值的"颜色。假设你想要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+")")

如果你想和他们一起演奏，这里有一把小提琴

编辑

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

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

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

http://jsbin.com/kagube/1/edit?html，css，输出

注意，可能存在"bug"

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

其中，偶尔，生成的字符串的length可能是5，而不是6，导致元素的style没有应用background-color；例如，

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>

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

jsfiddlehttp://jsfiddle.net/guest271314/f895bh53/

相关内容

最新更新

热门标签：