Question

我需要以这种格式创建一堆（800）CSS属性，每个属性都有不同的颜色：

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

我发现这个方便的脚本可以生成随机HEX颜色（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之前所有Ts的情况的奖励积分，其格式如下：例如：T001和T050。

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

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

这是一个简单的脚本，可以生成你想要的东西。您可以从textarea复制格式化的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);
}

Answer 2

最后得到了所有（包括我的奖金问题）。值得注意的是，偶尔这个随机颜色生成器会创建一个有5个字符的HEX无效，但我无法弄明白为什么，所以我不得不亲自去找每个，但对我的挑战来说不是一个大问题

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

用随机颜色生成CSS属性的脚本

2 个答案: