显示随机图像从数组在javascript

show random image from array in javascript

本文关键字：javascript 数组 随机 图像 显示      更新时间：2023-09-26

我想从imgArray中随机选择16张图片，同时打印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(){
}

试试这个函数

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();
}
调用函数 
getRandomImage(ARRAY-VARIABLE, '/images/')

参考LIVE DEMO。您将看到每次刷新后图像的变化

使用以下代码:

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

在你的代码中有一些东西我想指出

  • javascript默认没有imgArray(可能是你的构造函数)

  • 你想要一个Array

  • Javascript是大小写敏感的，js中的Math对象有一个大写的M

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

但是对于你的问题

  1. 函数接受参数，因此可以为图像数组接受一个参数

    function (imgArr) {...
    这样您就可以通过imgArr

    2. 访问传递的参数

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

    function (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));
相关文章：