使用jquery或javascript创建一个正方形的颜色

我正在寻找一个类或可能的解决方案，使用jQuery创建

div

或图片，并用如下较小的正方形填充：

---

jQuery能够做到这一点吗？

类似这样的功能，可能是：

var container = $('<div id="container">');
$('body').append(container);

for (i=0; i<25; i++) {
    // Random colour from http://stackoverflow.com/questions/1535128/apply-random-color-to-class-elements-individually
    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
    $('<div class="child">').css('background-color', hue).appendTo(container);
}

---

.

类似的另一个例子：

var unitSize = 16; // width (and height) of one square
var unitsWide = 6; // number of squares along x-axis
var unitsTall = 6; // number of squares along y-axis
var drawing = $('<div class="drawing"></div>').css({
    overflow: 'hidden',
    border: '16px solid #000000',
    width: unitSize * unitsWide
});
for (var i = 0; i < unitsWide * unitsTall; i++) {
    var randomColor;
    randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000
    randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF
    randomColor = randomColor.toString(16); // hex representation randomColor
    randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
    randomColor = "#" + randomColor; // # added
    $('<span class="square"></span>').css({
        display: 'block',
        float: 'left',
        width: unitSize,
        height: unitSize,
        'background-color': randomColor
    }).appendTo(drawing);
}
drawing.appendTo($("body"));

var unitSize=16；//一个正方形的宽度（和高度）
var unitsWide=6；//沿x轴的正方形数
var unitsTall=6；//沿y轴的正方形数
变量绘图=$（''）.css({
溢出：“隐藏”，
边框：“16px固态#000000”，
宽度：单位大小*单位宽度
});
对于（变量i=0；irandomColor=Math.floor（randomColor）；/0
函数运行（）{
var o=document.getElementById（“随机块”）；
如果（o）{
o、 parentNode.removeChild（o）；
}
var行=5；
var-cols=5；
变量大小=30；
var container=document.createElement（“div”）；
container.id=“随机块”；
container.className=“container”；
container.style.width=（cols*size）+“px”；
container.style.height=（行*大小）+“px”；
对于（变量i=0，len=rows*cols；i
@alex是的，那很好，我不介意这不是jQuery的核心功能。我想你会找到一个jQuery插件来做这件事，但这也可以用纯文本制作Javascript@rabudde您知道如何在javascript中实现这一点吗？您必须自己提供颜色，或者使用rgb valuesget中的一些值并为w编辑它谢谢你！这太完美了。我试着制作一个html表格，但是用上面提到的jfriend00这样的颜色填充每个框，但这正是我的想法。我计划用它进行php聊天。这个聊天允许用户提供自己的化身。当用户选择一个化身时，代码看起来像这样
一种检查这种情况的方法，如果它不存在，请将
添加到此
注意，您可能希望使用颜色而不是RGB。操纵这些颜色更有意义，并且可以轻松地从/转换为RGB以用于CSS。我没有想到这一点。我尝试了您的演示，它工作得非常好，速度也非常快。我尝试为附加部分，我还尝试将它添加到一个具有txt类的div中，但它仅对body有效。是否有方法进行更改that@sarsar：您是否试图（i）将其附加到
td
或（ii）将
div/span
转换为
table/tr/td
？第一种情况表示您可能正在（稍微）进行错误。后一种情况几乎不需要重写。我想我犯了一个错误，我想把它附加到这个
中，所以是的，第一种情况是我感兴趣完成的。我犯了一个错误，应该是在粗体标记之后，但我以
b.nme pn_reg
为例，但没有发生任何事情，也许你可以看一看t我的页面，看看我做错了什么（我用它来聊天，对于没有头像的人，它会显示这个方块）
var unitSize = 16; // width (and height) of one square
var unitsWide = 6; // number of squares along x-axis
var unitsTall = 6; // number of squares along y-axis
var drawing = $('<div class="drawing"></div>').css({
    overflow: 'hidden',
    border: '16px solid #000000',
    width: unitSize * unitsWide
});
for (var i = 0; i < unitsWide * unitsTall; i++) {
    var randomColor;
    randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000
    randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF
    randomColor = randomColor.toString(16); // hex representation randomColor
    randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
    randomColor = "#" + randomColor; // # added
    $('<span class="square"></span>').css({
        display: 'block',
        float: 'left',
        width: unitSize,
        height: unitSize,
        'background-color': randomColor
    }).appendTo(drawing);
}
drawing.appendTo($("body"));

function run() {

    var o = document.getElementById("randomBlock");
    if (o) {
        o.parentNode.removeChild(o);
    }

    var rows = 5;
    var cols = 5;
    var size = 30;

    var container = document.createElement("div");
    container.id = "randomBlock";
    container.className = "container";
    container.style.width = (cols * size) + "px";
    container.style.height = (rows * size) + "px";

    for (var i = 0, len = rows * cols; i < len; i++) {
        o = document.createElement("div");
        o.className = "cell";
        o.style.height = size + "px";
        o.style.width = size + "px";
        o.style.backgroundColor = getRandomBlue();
        container.appendChild(o);
    }
    document.body.appendChild(container);
}

function getRandomBlue() {
    var luminosity = Math.floor(Math.random() * 256);
    var blue = Math.floor(Math.random() * 256);
    return("rgb(" + luminosity + "," + luminosity + "," + blue + ")");
}

window.onload = run;