使用 JavaScript 的随机图像生成器

在本文中，我们将学习如何仅使用 HTML、CSS 和 JavaScript 以固定间隔生成随机图像。

方法：将网站上随机生成的图片以数组的形式存储，然后在一定的时间间隔内将这些图片展示给用户。我们使用setInterval()函数，它是 JavaScript 的内置函数，用于设置要显示的图像之间的计时器，我们将使用floor( Math.random() *pics.length)方法生成 0 之间的随机数以及分配给要随机显示的图像的数组的长度。

以下是上述方法的分步实施。

第 1 步：在您的 HTML 页面中，创建一个包含随机生成的图片的空白部分。

index.html

  

    
  

  

    

        

        
Geeks For Geeks Courses


        

            With the idea of imparting programming 
            knowledge, Mr. Sandeep Jain, an IIT 
            Roorkee alumnus started a dream,
            GeeksforGeeks. Whether programming 
            excites you or you feel stifled, 
            wondering how to prepare for interview
            questions or how to ace data structures 
            and algorithms, GeeksforGeeks is a 
            one-stop solution.
        
        



        

        

    

  

输出：

带有空白部分的初始网页。

第 2 步：在 JavaScript 中，创建一个图像链接数组。数组内的图像将在网页上随机生成。我们将使用Math.random函数随机调用这个数组的索引来显示。

创建一个 JavaScript 变量来存储使用数学库计算的随机值，即Math.floor(Math.random()*pics.length) 。它将生成一个介于 0 和 pics 数组长度之间的随机数，这将分配给 pics 数组中的图像以随机显示它们。

setInterval()是 JavaScript 的内置函数，用于在要显示的图像之间设置计时器。它有2个参数，需要执行的函数，以及每一代之间的时间间隔。

现在将所有 JS 代码合并到您的 HTML 代码中。

索引.html

  

    
    
     Image Generator
    
        * {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
  
            font-family: Arial, Helvetica, sans-serif;
        }
  
        body {
            background: rgba(120, 16, 180, 0.767);
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
  
        .container {
            margin: 1.5vh 20vw;
            margin-top: 10vh;
            text-align: center;
            background: rgb(39, 188, 209);
            background: linear-gradient(118deg,
                    rgba(39, 188, 209, 0.9783263647255778) 0%,
                    rgba(6, 14, 101, 1) 100%);
            opacity: 0.9;
            color: white;
            padding: 10px 10vw;
            border-radius: 20px;
            min-height: 15vh;
        }
  
        h1 {
            text-transform: uppercase;
        }
  
        section {
            height: 50vh;
            width: 100%;
            margin-top: -50px;
            background-position: center;
            background-repeat: no-repeat;
        }
    

  

    
        
        Geeks For Geeks Courses
        
           With the idea of imparting programming knowledge, 
           Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream,
           GeeksforGeeks. Whether programming excites you or you 
           feel stifled, wondering how to prepare for interview
           questions or how to ace data structures and algorithms, 
           GeeksforGeeks is a one-stop solution.
        
  
        
        
        
    
    
        const pics = [
            'url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200316135008/red7.png")',
            'url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200316135014/yellow3.png")',
            'url(
"https://media.geeksforgeeks.org/img-practice/[e-mail]")',
            'url(
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-course-overview-image.png")',
            'url(
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png")',
            'url(
"https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png")',
            'url(
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png")'
        ];
        const pic = document.querySelector('section');
  
        function showImage() {
            var a = Math.floor(Math.random() * pics.length);
            var img = pics[a];
            pic.style.backgroundImage = img;
        }
  
        setInterval(showImage, 1000);
    

  

输出：

随机图像生成器