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';

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

1 个答案: