Генератор случайных изображений с использованием JavaScript
В этой статье мы узнаем, как генерировать случайные изображения с фиксированными интервалами, используя только HTML, CSS и JavaScript.
Подход: Изображения, которые будут генерироваться случайным образом на веб-сайте, должны храниться в виде массива, затем эти изображения отображаются пользователю через регулярные промежутки времени. Мы используем функцию setInterval(), которая является встроенной функцией JavaScript, для установки таймера между отображаемыми изображениями, и мы будем использовать метод floor( Math.random() *pics.length) для генерации случайного числа между 0 и длина массива, который назначается изображениям для случайного отображения.
Ниже приведена пошаговая реализация описанного выше подхода.
Шаг 1: На своей HTML-странице создайте пустой раздел, который будет содержать случайно сгенерированные изображения.
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> |
Выход:
Шаг 2: В JavaScript создайте массив ссылок на изображения. Изображения внутри массива должны генерироваться случайным образом на веб-странице. Мы будем вызывать индексы этого массива случайным образом, используя функцию Math.random для отображения.
Создайте переменную JavaScript для хранения случайного значения, рассчитанного с помощью библиотеки Math, т.е. Math.floor(Math.random()*pics.length) . Он собирается сгенерировать случайное число между 0 и длиной массива pics, это будет присвоено изображениям внутри массива pics для их случайного отображения.
setInterval() — это встроенная функция JavaScript, которая используется для установки таймера между отображаемыми изображениями. У него есть 2 параметра: функция, которую необходимо выполнить, и временной интервал между каждым поколением.
Теперь объедините все коды JS в свой HTML-код.
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("https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png")", "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> |
Выход: