Question

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

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

谢谢

Answer 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>

Answer 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>

在1个div标签中加载1个随机图片（可能是10张图片）

2 个答案:

更新-在完整的HTML有效页面内的答案相同