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

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 出现:0.26 2 出现:0.24 3 出现:0.26 4 出现: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>`
        }
    }