Question

我目前正在从事一个项目，该项目需要我从画廊中生成一定数量的图像（比如说50张），其中某些图像的产生几率比其他图像小。脚本必须快速且优雅。

我目前有以下HTML：

<div className="item-picture">
  <img class="random-img" src="" />
</div>
<div className="item-picture">
  <img class="random-img" src="" />
</div>
<div className="item-picture">
  <img class="random-img" src="" />
</div>
<div className="item-picture">
  <img class="random-img" src="" />
</div>

和以下javascript：

function randomImg(){
var randomNumber = Math.floor(Math.random() * 4) + 1;
var imgName = "img_" + randomNumber + ".png";
document.getElementByClassName("random-img").src= "img" + "/" + imgName ;
}

但是，此脚本不允许我生成多张图像，并且我无法设置任何％。我是javascript的新手，很想获得帮助。

我正在使用React.JS构建该应用程序，并且还允许使用jQuery。

谢谢！

Answer 1

好吧，这段代码可以生成50张图像，但是我没有从%中得到您想要的：

// use container for HTML tags
<div id="container">
</div>
<script>

    function randomImg(){
        var randomNumber = Math.floor(Math.random() * 4) + 1;
        var imgName = "img_" + randomNumber + ".png";
        for (let i = 1; i < 50; i++) {
            let src = "img" + "/" + imgName ;
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} />`
        }
    }

</script>

更新：

function randomImg(){
        let collection = {}
        for (let i = 1; i < 50; i++) {
            var randomNumber = Math.floor(Math.random() * 4) + 1;
            var imgName = "img_" + randomNumber + ".png";
            let src = "img" + "/" + imgName ;
            if (!collection[randomNumber]) {
                collection[randomNumber] = 1; // this will be for count the appearances of the img
            } else {
                collection[randomNumber] += 1; 
            }
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} /><span class=${randomNumber} ></span>`
        }
        for (randomNumber in collection) {
            percent = collection[randomNumber] / 50
            /*
            document.getElementById("container").innerHTML += ` ${randomNumber} Appeared: ${percent}`
            */
        }
    }

这将像这样添加到容器div的末尾：

1 Appeared: 0.26 2 Appeared: 0.24 3 Appeared: 0.26 4 Appeared: 0.22

如果要将其添加到每个图像，则可以使用以下代码替换注释行：

  $(`.${randomNumber}`).map(
                function () {
                    this.innerHTML += ` ${randomNumber} Appeared: ${percent}`
                }
            )

更新：一次添加所有内容：

function randomImg(){
        let all = []
        let collection = {}
        for (let i = 1; i < 50; i++) {
            var randomNumber = Math.floor(Math.random() * 4) + 1;
            var imgName = "img_" + randomNumber + ".png";
            let src = "img" + "/" + imgName ;
            all.push([src, randomNumber])
            if (!collection[randomNumber]) {
                collection[randomNumber] = 1; // this will be for count the appearances of the img
            } else {
                collection[randomNumber] += 1; 
            }
        }
        for (image of all) {
            src = image[0]
            randomNumber = image[1]
            percent = collection[randomNumber] / 50
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} /><span> Appeared: ${percent}</span>`
        }
    }

生成不同百分比的随机图像

1 个答案: