Skip to content
Related Articles

Related Articles

Random Image Generator using JavaScript

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Expert
  • Last Updated : 17 Feb, 2022

In this article, we will learn how to generate random images in fixed intervals using only HTML, CSS, and JavaScript.

Approach: The pictures which are going to be generated randomly on the website should be stored in the form of an array, these pictures are then displayed to the user within a regular time interval.  We use the setInterval() function which is an in-built function of JavaScript to set a timer between the images to display and we will use the floor(Math.random()*pics.length) method to generate a random number between 0 and the length of the array that is assigned to the images to display randomly.

Below is the step-by-step implementation of the above approach.

Step 1: In your HTML page, create an empty section that will contain the randomly generated pictures.

index.html




<!DOCTYPE html>
<html>
  
<head>
    <style>
        * {
            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;
        }
    </style>
  
</head>
  
<body>
    <div class="container">
        <br>
        <h1>Geeks For Geeks Courses</h1><br>
        <p>
            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.
        </p>
        <br><br><br>
        <section></section>
        <br>
    </div>
</body>
  
</html>

Output:

Initial Web Page with the empty section.

Step 2: In JavaScript, create an array of image links. The images inside the array are to be generated randomly on the webpage. We will call the indexes of this array randomly using Math.random function to be displayed. 

Create a JavaScript variable to store a random value calculated by using the Math library i.e.  Math.floor(Math.random()*pics.length). It is going to generate a random number between 0 and the length of the pics array, this would be assigned to the images inside the pics array to display them randomly. 

setInterval() is an in-built function of JavaScript which is used to set a timer between the images to display. It has 2 parameters, the function that needs to be executed, and the time interval between each generation.

Now combine all the JS codes in your HTML code.

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Image Generator</title>
    <style>
        * {
            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;
        }
    </style>
</head>
  
<body>
    <div>
        <br>
        <h1>Geeks For Geeks Courses</h1><br>
        <p>
           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.
        </p>
  
        <br><br><br>
        <section></section>
        <br>
    </div>
    <script>
        const pics = [
            'url(
            'url(
            'url(
            'url(
            'url(
            'url(
            'url(
        ];
        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);
    </script>
</body>
  
</html>

Output:

Random Image Generator


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!