使用Javascript生成彩色块的随机组

我对html和Javascript编码都是新手，直到最近才通过w3schools.com教程学习如何使用它们

现在，我正在尝试在网页上产生以下效果：

页面上有9个方块（使用标签设置）。我希望使用Javascript或jquery编码，这样每次页面（重新）加载时，每个块都会随机变成七种不同颜色中的一种

我可以想出如何为单个块生成随机颜色，但现在我需要使其每次只生成3种颜色，其中4个块在颜色A中，3个块在颜色B中，2个块在颜色C中（颜色A、B和C可以是7种颜色中的任意一种，每次页面（重新）加载时，生成相同颜色的块组应该是随机的/不同的，我只需要将它们按上面的4/3/2格式分组）

希望我在表达我想做的事情时不要太困惑。任何帮助/建议都将不胜感激

谢谢！ 盖布

编辑：（很抱歉反应太晚，过去两天网络不稳定）

这是我最初拥有的

html文件中块的我的代码：

<table>
<tr>
     <td class='spanrows2'>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
   </td>
</tr>
</table>

这是我在.js文件中随机生成颜色的尝试：

var colorArray = ["#800000", "#A7BEFF",....];

var randomColor = Math.floor((Math.random() * colorArray.length));

for (i = 0; i < 9; i++) {
    $(".squareDivs").eq(i).css("background-color", colorArray[randomColor]);

    }

var colorArray=[“#800000”、“#A7BEFF”、…]；
var randomColor=Math.floor（（Math.random（）*colorArray.length））；
对于（i=0；i<9；i++）{
$（“.squareDivs”）.eq（i）.css（“背景色”，colorArray[randomColor]）；
}

CSS样式：

<style>
body{font-size:30px;
font-family: "Arial", "sans-serif";}

table {
margin-top:50px;
background-color:white;
border: 1px solid black;
margin-left:auto; 
margin-right:auto;
width:50%
}

td {
width: 700px;
padding: 5px;
border: 1px solid black;
}


.spanrows2 {
text-align: center;    
width: 600px;
}

.squareDivs {
width:100px;
height:100px;
background-color:#000000;
margin: 10px;
border-radius: 10px;
display: inline-block;
}

.squareTxt {
line-height: 100px;
vertical-align: middle;    
}


</style>

正文{字体大小：30px；
字体系列：“Arial”、“无衬线”；}
桌子{
边缘顶部：50px；
背景色：白色；
边框：1px纯黑；
左边距：自动；
右边距：自动；
宽度：50%
}
运输署{
宽度：700px；
填充物：5px；
边框：1px纯黑；
}
.西班牙2{
文本对齐：居中；
宽度：600px；
}
.squareDivs{
宽度：100px；
高度：100px；
背景色：#000000；
利润率：10px；
边界半径：10px；
显示：内联块；
}
.squareTxt{
线高：100px；
垂直对齐：中间对齐；
}

这样，每次我重新加载时，所有9个块都会生成完全相同的颜色。我试图将它们分组为我上面描述的4/3/2格式

更新：

我已经更新了我的脚本代码，现在我找到了一种方法，将随机颜色限制为每次仅3种（可能不是最平滑的方法，但它有效，这就是我所要求的），但我仍然不知道如何将它们分为4/3/2组

更新2：

我尝试为tempArray中的每种颜色实现一个计数器，这样它们的使用次数就不会超过给定的次数，但这似乎让整个事情变得更糟！现在，每次我重新加载时，所有9个块都是相同的颜色。有人能指出我做错了什么吗（下面代码的最新更改）

var colorArray=[“800000”、“A36386”、“FFD4D8”、“223CFF”、“F5FF5A”、“FF5555”、“A7BEFF”]；
函数洗牌（o）{
对于（var j，x，i=o.length；i；j=parseInt（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
};
洗牌（彩色数组）；
var color1=Math.floor（（Math.random（）*colorArray.length））；
var color2=“#000000”；
做{
color2=Math.floor（（Math.random（）*colorArray.length））；；
}
while（color2！=color1）；
var color3=“#000000”；
做{
color3=Math.floor（（Math.random（）*colorArray.length））；；
}
而（color3！=color1&&color3！=color2）；
var tempArray=[color1，color2，color3]；
对于（i=0；i<9；i++）{
变量count1=0，count2=0，count3=0；
选择颜色；
var randomColor=Math.floor（（Math.random（）*tempArray.length））；
如果（colorArray[randomColor]==tempArray[0]&&count1您可以执行以下操作：


将带有
块的9个
标记添加到页面中

添加带有7
colorX
类的CSS，使该类元素的背景具有某种颜色，其中X是0到6之间的数字
添加根据块组中元素数量生成颜色的javascript，并向块添加相关CSS类


函数addColor（NumberOfColor，组）{
var blocks=document.querySelectorAll（'.block'），
颜色=组。减少（功能（arr，n）{
var x=Math.floor（Math.random（）*numberOfColors）；
而（arr.indexOf（x）>=0）{//请确保颜色不同
x=（x+1）%NumberOfColor
}
返回arr.concat（数组（n）.fill（x））；
}, []);
数组.from（块）.forEach（函数（块，idx）{
block.classList.add（'color'+colors[idx]）
})
}
document.addEventListener（'DOMContentLoaded'，function（）{
添加颜色（7、[4、3、2]）；
})
.block{
宽度：30%；
高度：50px；
显示：内联块；
}
.color0{
背景色：红色；
}
.color1{
背景颜色：橙色；
}
.color2{
背景颜色：黄色；
}
.color3{
背景颜色：绿色；
}
.color4{
背景颜色：浅蓝色；
}
.color5{
背景颜色：蓝色；
}
.color6{
背景色：紫罗兰色；
}

请编辑你的问题，包括你写的代码。欢迎阅读堆栈溢出。考虑阅读来改善你的问题。好的问题意味着更可能的好答案。谢谢你的帮助。我知道我应该包括我的原始代码第一次我问这个问题，但有没有一种方法来设置颜色组使用TH。我在上面添加的e数组方法？
    var colorArray = ["#800000", "#A36386", "#FFD4D8", "#223CFF", "#F5FF5A", "#FF5555", "#A7BEFF"];

    function Shuffle(o) {
        for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    Shuffle(colorArray);

    var color1 = Math.floor((Math.random() * colorArray.length));

    var color2 = "#000000";
    do {
        color2 = Math.floor((Math.random() * colorArray.length));;
    }
    while (color2 != color1);

    var color3 = "#000000";
    do {
        color3 = Math.floor((Math.random() * colorArray.length));;
    }
    while (color3 != color1 && color3 != color2);

    var tempArray = [color1, color2, color3];

    for (i = 0; i < 9; i++) {
        var count1 = 0, count2 = 0, count3 = 0;
        var selectedColor;
        var randomColor = Math.floor((Math.random() * tempArray.length));
        if (colorArray[randomColor] == tempArray[0] && count1 <= 4) {
                selectedColor = tempArray[0];
                count1++;
        }
        else if (colorArray[randomColor] == tempArray[1] && count2 <= 3) {

            selectedColor = tempArray[1];
                count2++;
        }
        else if (count3 <= 2) {
            selectedColor = tempArray[2];
                count3++;
        }
        $(".squareDivs").eq(i).css("background-color", colorArray[selectedColor]);
}