【问题标题】:displaying images from a function that returns an array in javascript显示来自在 javascript 中返回数组的函数的图像
【发布时间】:2014-02-12 19:09:49
【问题描述】:

我有一个函数可以随机化一组图像并在显示后返回一个包含随机图像的数组。

<script type = "text/javascript">
var images = new Array('0.jpg', '1.jpg' , '2.jpg'), result=[] ;
Array.prototype.random = function () {
    var that = this.slice();
    var length=images.length;
    var rand;
    for(i=0; i<=4;i++)
    {
        rand=Math.floor(Math.random()*(length));
        result.push(images[rand]);
    }
    return result;
} 

//document.write(images.random()); 当我这样做时,我得到了带有图像的数组,但我想使用类似 document.write('&lt;img src="images/'+images.random()+'" width = \"\" height = \"\"/&gt;');\but 那不起作用..任何想法来显示它们

【问题讨论】:

  • images.random() 正在返回一个数组。要显示图像,您必须遍历数组。
  • 请不要将 random 函数放在 Array 原型上。它甚至不使用调用它的数组。相反,请使用静态的通用函数,您可以通过该函数传递数组和所需的元素数量。
  • rand=Math.floor(Math.random()*(length));result.push(images[rand]); 似乎能够创建一个包含重复项的数组,或者说与随时拉随机数没有太大区别。如果你只是想要一张随机的图片,我看不出重建数组的原因。只要randomreturn images[Math.floor(Math.random()*images.length)];。同样,我认为不需要使用 write 或原型。
  • so for(i=0; i
  • 我想显示 9 个图像数组中的 4 个随机图像,并使用正在显示的随机图像创建一个数组

标签: javascript arrays random prototype


【解决方案1】:

您的问题,无论何时您执行document.write,它都会清除所有 DOM。更好的解决方案是使用document.createElement 创建图像,然后将它们附加到正文或您想要的任何其他容器。

首先要让你的代码清晰,创建一个这样的函数:

function createImage(imgname){
    var img = document.createElement("img");
    img.src = "images/" + imgname;
    return img;
}

然后这样做:

images.random().forEach(function(imgname){
    document.body.appendChild(createImage(imgname));
});

【讨论】:

    【解决方案2】:

    我使用了你们中的一些人提供的一些帮助,这就是我得到的。所以这段代码需要一个图像数组,随机化它们,显示它们

    <script type="text/javascript">
    var images=new Array('g.jpg','f.jpg','f.jpg')
    var re=[];
    var length=images.length;
    var entered=document.getElementById('images');
    for(var f=0; f<4; f++){
    var ran=Math.floor(Math.random()*(length));
    var imge=document.createElement("img";
    image.src="images/" + images[ran];
    entered.appendchild(image);
    </script)
    

    【讨论】:

      猜你喜欢
      • 2020-10-26
      • 1970-01-01
      • 2018-05-15
      • 1970-01-01
      • 2011-05-27
      • 2013-02-10
      • 2015-05-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多