Question

如何创建一个对象生成器，它将在页面上创建随机颜色，大小和位置的随机方块？我认为我已经设置了所有参数，但我不能把它们放在一起。

//Size Generator
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (200 - 50 + 1) ) + 50;
    }

    var getSize = getRndInteger(50, 200);

//Colour Generator
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var colour = '#';
        for (var i = 0; i < 6; i++) {
        colour += letters[Math.floor(Math.random() * 16)];
      }
      return colour;
    }

    var colour = getRandomColor();

//Position Generator
    function getPosition(min, max) {
        return Math.floor(Math.random() * (600 - 0 + 1) ) + 0;
    }

    var getX = getPosition(0, 600);
    var getY = getPosition(0, 600);

//Square Generator
    function squareGenerator() {

        var div = document.createElement("square");

        div.style.backgroundColor = colour;

        div.style.left = getX + "px";

        div.style.top = getY + "px";

        div.style.height = getSize + "px";

        div.style.width = getSize + "px";

    }

我被困在哪里是如何让它出现在页面上。

Answer 1

首先，创建的div将不会包含任何内容，因此您将看不到它。
旁路将div.style.position设置为fixed。

其次，您需要将div附加到正文，例如使用：document.body.appendChild(div)

第三，你需要通过拨打电话来调用该功能：squareGenerator();

最后，在创建元素时，请使用有效的HTML元素，例如div / section / article - ＆gt;使用document.createElement（ 'DIV'）。它似乎与'square'合作，但我不认为所有浏览器都会那么自由。

//Size Generator
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (200 - 50 + 1) ) + 50;
    }

    var getSize = getRndInteger(50, 200);

//Colour Generator
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var colour = '#';
        for (var i = 0; i < 6; i++) {
        colour += letters[Math.floor(Math.random() * 16)];
      }
      return colour;
    }

    var colour = getRandomColor();

//Position Generator
    function getPosition(min, max) {
        return Math.floor(Math.random() * (200 - 0 + 1) ) + 0;
    }

    var getX = getPosition(0, 600);
    var getY = getPosition(0, 600);

//Square Generator
    function squareGenerator() {

        var div = document.createElement("div");

        div.style.backgroundColor = colour;

        div.style.left = getX + "px";

        div.style.top = getY + "px";

        div.style.height = getSize + "px";

        div.style.width = getSize + "px";
        div.style.position='fixed';
        document.body.appendChild(div);
    }
    squareGenerator();

您可以在随机位置看到所需的方块。

创建对象生成器

1 个答案: