Javascript 在javascript中显示来自数组的随机图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14004318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 15:24:23  来源:igfitidea点击:

show random image from array in javascript

javascripthtml

提问by gunericinar

I want to select random images from imgArray to print 16 different images at the same time but can't fill the imgRandom function.

我想从 imgArray 中选择随机图像以同时打印 16 个不同的图像但无法填充 imgRandom 函数。

img = new imgArray(7);
img[0]='1.png';
img[1]='2.png';
img[2]='3.png';
img[3]='4.png';
img[4]='5.png';
img[5]='6.png';
img[6]='7.png';
img[7]='8.png';

var rand=imgArray[math.floor(math.random*imgArray.length)];

function imgRandom(){

}

回答by Siva Charan

Try this function

试试这个功能

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

Call the function

调用函数

getRandomImage(ARRAY-VARIABLE, '/images/')

Refer LIVE DEMO. You will see change in image for every refresh

参考现场演示。每次刷新您都会看到图像的变化

回答by extramaster

Use the following code:

使用以下代码:

var imgArray = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png'];
var basePath="YOUR_FOLDER_PATH_HERE";

function imgRandom() {
    for (var i = 0; i < 18; i++) {
        var rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        var image = new Image();
        image.src = basePath+rand;
        document.body.appendChild(image);
    }
}

Live Demo| Source

现场演示| 来源

回答by Moritz Roessler

There are some things in your code i would like to point out

我想指出您的代码中的一些内容

  • There is no imgArrayin javascript per default (maybe its a constructor of your's)
  • You want an Array

  • Javascript is case sensitiv, and the Mathobject in js has an capital M

    • math-> Math
  • And the randompropertie of the Mathobject, has to be invoked to return a random number
    • random-> random()
    • Math.random()
  • imgArray默认情况下没有javascript(也许它是您的构造函数)
  • 你想要一个 Array

  • Javascript 区分大小写,Mathjs 中的对象有一个大写的 M

    • math-> Math
  • 而对象的random属性Math,必须被调用以返回一个随机数
    • random-> random()
    • Math.random()

But to your Question

但是对于你的问题

  1. functions take parameters, so could take one param for an array of images

    function (imgArr) {...
    With this you have access to the passed parameter throug imgArr

  2. function can return values, so taken Math.randomwe can go on

    function (imgArr) { return imgArr[Math.floor(Math.random() * imgArr.length)] }

  3. You don't have to "Dim" Array, and predefine the Elements you gonna put in, you can just do sth. like

    var imgArr = ["img01.png","img02.png",...]
    And var arr=[]would be equals var arr = new Array()

  4. So calling this function with your Array couldlook like

  1. 函数采用参数,因此可以为一组图像采用一个参数

    function (imgArr) {...
    有了这个,您可以访问传递的参数 imgArr

  2. 函数可以返回值,所以Math.random我们可以继续

    函数 (imgArr) { 返回 imgArr[Math.floor(Math.random() * imgArr.length)] }

  3. 您不必“变暗”数组,也不必预先定义要放入的元素,您只需做某事即可。喜欢

    var imgArr = ["img01.png","img02.png",...]
    并且var arr=[]将是平等的var arr = new Array()

  4. 所以用你的数组调用这个函数可能看起来像



  var img = ["1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png"]
     function imgRandom(imgArr) {
        return imgArr[Math.floor(Math.random() * imgArr.length)];
    }
 console.log(imgRandom(img));