使用java脚本在div中随机定位绝对元素

Question

您好，我是 javascript 的新手，所以如果这很愚蠢，我很抱歉，但是，我正在创建一个生成器，它为字母表中的每个字母显示一个 .png。目标是在 div 内重叠并显示多个图像，位置随机。到目前为止，我可以通过创建随机 z-index 来将每个字母的图像叠加显示，但是我无法弄清楚如何将每张图片的定位更改为随机。

我试图创建一个名为 randomThingTwo 的 Math.floor 随机变量来改变图像的顶部位置，但这不起作用。

请帮忙！

这是我当前的代码：

var x,y,splitted;

function generate() {

    x = document.getElementById("form1");
    y = x.elements["message"].value;
    var text = [y];
    var joined = text.join();
    var res = joined.toLowerCase();
    var regexp = /[A-z]/g;
    splitted = res.match(regexp);

    var words = [];

    judge();
}

var counter = -1;

function judge() {
    if (counter < y.length) {
        counter++;
        art();
    }
}

function art() {
    img = new Image(splitted[counter] + '.png');
    var picture = document.getElementById("pic");
    var img = document.createElement('img');
    var randomThing = Math.floor((Math.random() * 10) + 1);
    console.log(randomThing);
    // var randomThingTwo = Math.floor((Math.random() * 20) + 1);

    img.setAttribute("src", splitted[counter]+".png");
    img.style.zIndex= randomThing;
    img.style.position= "absolute";
    // img.style.position.marginTop = randomThingTwo;

    img.setAttribute("width", "304");
    img.setAttribute("width", "328");

    picture =  document.getElementById("pic").appendChild(img);

    setTimeout(function () {
        judge();
    }, 100);
}

Answer 1

以这种方式设置属性时，您需要在之后包含'px'，否则它不知道您传递的数字使用什么单位。试试把第二行改成img.style.marginTop = randomThingTwo + 'px';