Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/image/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 多次随机生成若干张图片_Javascript_Image_Random - Fatal编程技术网

Javascript 多次随机生成若干张图片

Javascript 多次随机生成若干张图片,javascript,image,random,Javascript,Image,Random,我在一个数组中有3个图像,我随机索引以随机生成它们,但我想生成每个图像4次。最有效的方法是什么 编辑完整代码: var image_array = ["image1.png", "image2.png", "image3.png"]; function set_page() { var table = document.getElementById("grid"); if(table != null) { for(var i = 0; i <

我在一个数组中有3个图像,我随机索引以随机生成它们,但我想生成每个图像4次。最有效的方法是什么

编辑完整代码:

var image_array = ["image1.png", "image2.png", "image3.png"];

function set_page() 
{
    var table = document.getElementById("grid");

    if(table != null)
    {
        for(var i = 0; i < table.rows.length; i++)
        {
            for(var j = 0; j < table.rows[i].cells.length; j++)
            {
                table.rows[i].cells[j].onclick = function() {
                    click_cell(this);
                }

                //table.rows[i].cells[j].style.backgroundImage = "url('../images/back.png')";

                add_cell_image(table.rows[i].cells[j]);

            }
        }
    }
}

function click_cell(cell)
{

}

function add_cell_image(cell)
{
    for(var i = 0; i <= image_array.length; i++)
    {
        for(var j = 0; j <= image_array.length; j++)
        {
            var index = create_values();

            cell.innerHTML = "<img class='cell_image' align='middle' width='90' height='90' src ='../images/" + image_array[index] + "'/>";
        }
    }
}

function create_values()
{
    return Math.floor(Math.random() * image_array.length);
}

您可以使用一个包含所有索引的数组,它:


这里有一个解决方案。不是最优雅的,但它应该让你开始

其想法是创建一个选项数组-通过将初始图像集连接X次。在你最初的问题中,你说你想把每张图片重复4次。因此,我们将通过将初始数组串联4次来创建一个选项数组

然后,我们将使用.slice从这个选项数组中选择一个随机元素,这将从选项数组中删除该选项。我们将继续此操作,直到选项数组为空

var image_数组=[1,2,3]; var options=create_options图像_数组,4; 功能集\u页表,选项{ 如果表!=null{ 对于变量i=0;i你所说的最高效是什么意思?我应该先添加完整的代码,但这将如何应用于我现在的工作方式?我应该先添加完整的代码,但这将如何应用于我现在的工作方式?你是否在问如何更改现有解决方案以使其工作?或者寻找一个有效的解决方案?上面的解决方案对你不适用吗?您应该能够用您拥有的字符串替换image_数组中的数字。例如-image_数组=[img1、img2、img3];我将图像添加到表中的每个单元格中。这确实是可行的,但我正在尝试将其应用到一个表中。前几天我更新了这个问题的代码,加入了set_page函数,在这个函数中,我对每个单元格进行循环,除了在一个表上,我怎么做呢?在每个单元格上打印每张图片
<div id="cell"/>

<script>
images = ["img1", "img2", "img3"];

/**
 * Shuffles array in place.
 * @param {Array} a items The array containing the items.
 */
function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
}

function range(number) {
    return Array.apply(null, Array(number)).map(function (_, i) {return i;});
}

function create_image(image_source) {
    var img = document.createElement('img');
    img.src = image_source;
    img.classList.add('cell_image');
    img.align = 'middle';
    img.height = '90';
    img.width = '90';
    return img;
}

function add_cell_image(cell) {
    indices = range(images.length * 4);
    shuffle(indices);
    for (let i = 0; i < indices.length; i++) {
        image_source = "../images/" + images[indices[i] % images.length];
        image = create_image(image_source);
        cell.appendChild(image);
    }
}

cell = document.getElementById('cell')
add_cell_image(cell);
</script>