在 1 个 div 标签中加载 1 个随机图像（可能是 10 个图像）答案

【问题标题】：load 1 random image (maybe 10 images) in 1 div tag在 1 个 div 标签中加载 1 个随机图像（可能是 10 个图像）
【发布时间】：2018-11-05 18:55:31
【问题描述】：

我不是一个真正的程序员，需要一些帮助。我需要一个插入 div 标签的脚本，并且当页面从外部 js 文件加载时，在该 div 标签内随机加载图像（从 10 个列表中）。

我搜索和搜索并尝试了不同的方法，但真的需要帮助。

谢谢

【问题讨论】：

您需要在此处发布您的代码或使用javascript insert random image进行更好的搜索

标签： jquery image random

【解决方案1】：

下面的解决方案使用了jQuery，但是没有它也可以通过简单的方式实现

$(document).ready(function() {

  function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  var imageUrls = [
    "https://www.gstatic.com/webp/gallery3/1.sm.png",
    "https://www.gstatic.com/webp/gallery3/2.sm.png",
    "https://www.gstatic.com/webp/gallery3/3.sm.png"
  ];

  var randomImage = imageUrls[randomInt(0, imageUrls.length - 1)];

  $(".container").append("<img alt='" + randomImage + "' src='" + randomImage + "'</>");


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

更新 - 一个完整的 HTML 有效页面中的相同答案

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>    
    <script type="text/javascript">


        /**
        * Loads a random number
        */
        function randomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // List of urls
        var imageUrls = [
            "https://www.gstatic.com/webp/gallery3/1.sm.png",
            "https://www.gstatic.com/webp/gallery3/2.sm.png",
            "https://www.gstatic.com/webp/gallery3/3.sm.png"
        ];

        function loadRandomImage() {
            var randomImage = imageUrls[randomInt(0, imageUrls.length - 1)];
            $(".container").append(
                    "<img alt='" + randomImage + "' src='" + randomImage + "'</>");
        }

        // This function executes when the DOM is ready, 
        // e.g., when the entire page is loaded
        $(document).ready(function() {
            loadRandomImage()
        });
    </script>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

【讨论】：

所以我将 $(document) 部分放入 te doc 头部的脚本标签中？第二部分进入正文？
我不明白你的问题。我更新了我的答案，向您展示了一种将代码包含在简单 HTML 页面中的非常简单的方法。也许您应该发布您的 HTML 代码，看看您还有什么疑问？
@AntoineScotto 第一部分是javascript。它要么需要在<script></script> 标签之间，要么在页面引用的外部 JS 文件中。第二部分是属于<body></body> 标签之间的HTML。
阅读更新后的答案。它的所有部分都在正确的位置。 Snippet 就是这样，一个 sn-p，Stackoverflows 知道将它们放在哪里。
谢谢！我会试试这个看看

【解决方案2】：

也只是想加入香草 JS 答案。

<style>
    #show-picture {
        display: block; 
        margin: 20px; 
        height: 400px; 
        width: 400px; 
        box-shadow: 0 0 12px rgba(0,0,0,0.25);
        background-size: cover; 
        background-position: center; 
    }
</style>

<div id="show-picture"></div>

<script>
    const images = [
        'https://picsum.photos/400/400?image=600',
        'https://picsum.photos/400/400?image=601',
        'https://picsum.photos/400/400?image=602',
        'https://picsum.photos/400/400?image=603',
        'https://picsum.photos/400/400?image=604',
        'https://picsum.photos/400/400?image=605',
        'https://picsum.photos/400/400?image=606',
        'https://picsum.photos/400/400?image=607',
        'https://picsum.photos/400/400?image=608',
        'https://picsum.photos/400/400?image=609',
    ]

    // get random image
    const random_number = Math.floor(Math.random() * images.length); 
    const image = images[random_number]; 

    // get div and set background-image CSS to be our random image
    const show_picture = document.getElementById('show-picture');
    show_picture.style.backgroundImage = `url(${image})`; 
</script>

【讨论】：