javascript - 生成具有随机颜色的 CSS 属性的脚本

Question

我需要创建一堆 (800) 个 CSS 属性，每个属性都采用这种格式的不同颜色:

#mydiv[terr="T368"] {
  polygon-fill: #F11810;
}

我发现这个方便的脚本可以生成随机的十六进制颜色(http://www.paulirish.com/2009/random-hex-color-code-snippets/):

Math.floor(Math.random()*16777215).toString(16);

我对 javascript 有点陌生，无法组合执行以下操作的循环:

“T”旁边的数字需要从 1 递增到 800，每个 TXXX 都具有唯一的颜色。如果整个 800 有重复的颜色也没关系，我可以返回并手动修复它。无需添加确保重复项的功能。

我正在寻找的是一个生成 800 个 css 属性的脚本，如下所示:

#mydiv[terr="T100"] {
  polygon-fill: #F11810;
}
#mydiv[terr="T101"] {
  polygon-fill: #e2e2e2;
}
#mydiv[terr="T102"] {
  polygon-fill: #6A3D9A;
}
...etc, etc.

是的，#mydiv 保持不变。这是 CartoDB 的特定 CSS，因此格式特定于此。

我只需要生成 800 个 CSS 属性，这样我就可以将它们复制并粘贴到 CartoDB 中。

PS:处理100前所有T的情况加分，格式如下，例如:T001和T050。

编辑:我自己已经非常接近了，但可以在我上面的“奖金”问题上使用帮助。 H

for (rep = 1; rep <= 800; rep++) {
  var color = Math.floor(Math.random()*16777215).toString(16);  
    document.write('#mydiv[territory="T' + rep + '"] {<br> polygon-fill:#'   +color+';<br>}<br>');
}

Answer 1

这是一个简单的脚本，可以生成您想要的东西。您可以从文本区域复制格式化的 css。

JSFiddle demo

HTML:

<textarea id="output"></textarea>

JS:

var output = $("#output");
for (var i = 0; i < 801; i++) {
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    var css = "#mydiv[terr='T" + i + "']{\n polygon-fill: " + color + ";\n}\n";
    output.append(css);
}