在我的 javascript 文件中，我有一组由字母和数字组成的对，例如:{(A,5), (B,7), ..., (Z,3 )}.
对于每一对(A,x)，我的 html 中都有 x 个 div，带有 style = "background-color: {{object.color}}"。
我想编写一个方法，为每对 (A,x) 随机计算 x 颜色，这样:
- 每种颜色都与其他颜色有足够大的不同，足以区分所有颜色。
- 同一对夫妇的每种颜色都足够接近以识别这对夫妇。
例如:我有这对夫妇:{(A,5), (B,4), (C,10)} 所以我的 html 中有 19 个 div。对于集合 A 的所有 5 个 div，我计算蓝色调的颜色，对于集合 B 的所有 4 个 div，我计算绿色调的颜色，对于集合 C 的所有 10 个 div，我计算红色调的颜色。
当然你不会提前认识这对夫妇:)
有没有办法做到这一点，也许可以在 css 上使用每种颜色的 RGB 值或类似的东西？
目前我只做了一个方法，我完全随机地选择每种颜色，只避免太暗或太白的颜色，并用一个循环来保证已经采用的颜色不能被采用两次:
function(){
var cb=0;
var cr=0;
var cg=0;
var minEcart=40;
var testB=true;
var cptI=0;
while(testB){
testB=false;
cr=Math.round(Math.random()*170) + 85;
cb=Math.round(Math.random()*170) + 85;
cg=Math.round(Math.random()*170) + 85;
for(var j=0; j<$scope.colorAlreadyGiven.length;j++){
if(($scope.colorAlreadyGiven[j][0]-cb>=-minEcart)&&
($scope.colorAlreadyGiven[j][0]-cb<=minEcart)&&
($scope.colorAlreadyGiven[j][1]-cg>=-minEcart)&&
($scope.colorAlreadyGiven[j][1]-cg<=minEcart)&&
($scope.colorAlreadyGiven[j][2]-cr>=-minEcart)&&
($scope.colorAlreadyGiven[j][2]-cr<=minEcart)){
testB=true;
cptI++;
if(cptI>=50){
testB=false;
}
}
}
}
$scope.colorAlreadyGiven.push([cb,cg,cr]);
return "#"+(cb+cg*256+cr*65536).toString(16);
}
感谢您的关注。
最佳答案
查看这篇关于使用 javascript 使颜色变亮和变暗的文章 https://css-tricks.com/snippets/javascript/lighten-darken-color/
你可以选择一个底色，然后将它变亮或变暗到一个随机的程度
另一种方法是首先使用 CSS 预处理器(SASS 或 LESS)生成调色板，然后使用 javascript 通过类名或属性(. red1 .red2 .red3 或 [data-red-shade=1] [data-red-shade=2] [data-red-shade=3] )
关于javascript - 根据一些集合创建随机颜色的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35133811/