Question

就像标题说的那样，我一直在尝试通过在给定的表格中键入数字并按go键来生成该数目的具有随机彩色背景的框。

到目前为止，这是JS：

<script type="text/javascript">
var number = 3;
function numBoxes(){

    var form = document.getElementById("form1");

    var container = document.getElementById("container");
    while (container.children.length > 0) {
        container.removeChild(container.firstElementChild);
    }

    number = form.elements["number"].value;

    setup();
}

function setup(){

    var container = document.getElementById("container");

    for (var i = 0; i < number; i++) {
        var box = document.createElement("div");
        box.id = "newdiv"

        container.appendChild(box);
        var d = document.getElementById("newdiv");
        var colors = random_bg_color();
        d.style.backgroundColor = colors;

    }
}

function random_bg_color(){
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = "rgb(" + x + "," + y + "," + z + ")";
    return bgColor;
}

</script>

我唯一无法开始工作的就是为每个新创建的分区或框分配随机的RGB颜色。

注意：这是要在没有jQuery的情况下完成的

Answer 1

您每次都为div分配相同的ID。您完全不需要为创建的div分配ID，也不必每次都生成唯一的ID。这是10个盒子的工作示例。并且color属性用于文本颜色。使用backgroundColor属性设置样式。

function setup(){

    var container = document.getElementById("container");

    for (var i = 0; i < 10; i++) {
        var box = document.createElement("div");
        container.appendChild(box);
        var colors = random_bg_color();
        box.style.backgroundColor = colors;

    }
}

function random_bg_color(){
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = "rgb(" + x + "," + y + "," + z + ")";
    return bgColor;
}

setup()

https://jsfiddle.net/9h26e8np/2/

使用JavaScript生成随机的彩色框

1 个答案: