如何在框中随机创建图片

时间:2018-03-08 18:57:01

标签: javascript html

我试图从一个盒子里面的选择中随机生成一张图片。到目前为止,我已将此代码设置为鼠标单击:

    function randomize(){
        var imgDestination = document.getElementById("stage");
        var imgAdded = imageRandomizer();
        imgDestination.appendChild(imgAdded);
        ImgRandomPosition(imgAdded);
    }

    function ImgRandomPosition(imgAdded){
        var left = Math.floor((Math.random() * 700) + 1)+"px";
        var top = Math.floor((Math.random() * 500) + 1)+"px";
        var imagestyle = imgAdded.style;
        imagestyle.position = "absolute";
        imagestyle.top = top;
        imagestyle.left = left;
    }

    function imageRandomizer(imgArray, path) {
        path = 'img/';
        var num = Math.floor(Math.random() * imgArray.length);
        var img = imgArray[num];
        var imgStr = '<img src="' + path + img + '" alt = "">';
        document.write(imgStr);
        document.close();
    }

我不知道怎样让附肢工作。你知道我怎么解决这个问题, 任何帮助,将不胜感激。 谢谢。

1 个答案:

答案 0 :(得分:0)

由于imageRandomizer未返回任何内容,因此var imgAdded = imageRandomizer()函数中的行randomize没有任何意义,因为imgAdded始终为undefined

对此的解决方案是创建图像元素并在src函数中设置其altimageRandomizer属性,而不是创建图像的HTML并尝试解析它使用Document.write

<强>代码:

function imageRandomizer(imgArray, path) {
  var
    /* Generate a random index from the array. */
    random = Math.floor(Math.random() * imgArray.length),

    /* Cache the src string saved at the random index. */
    src = imgArray[random],

    /* Create a new image element. */
    image = new Image();

  /* Set a default value to path, if a falsey value is given. */
  path = path || 'img/';

  /* Set the 'src' and 'alt' properties of the image. */
  image.src = path + src;
  image.alt = "";

  /* Return the created image. */
  return image;
}