Генератор случайных картинок на JavaScript!



В этом кратеньком уроке мы создадим генератор случайных картинок!

Генератор случайных картинок на JavaScript!

Я уже делал уроки, на тему получения случайных чисел на PHP и на JavaScript (а также, оставанные на нем уроки о генерации цветов и цитат), но было много просьб сделать что-то подобное и для картинок.

Я решил сделать отдельный урок, где все будет наглядно, понятно и просто, начнем!

 

Описание генератора

Работать это будет так: перед пользователем будет кнопку, нажав на которую, будет показываться случайная картинка. Случайной она будет для пользователя, но для вас (как для разработчика) это будет картинка из заранее подготовленного списка картинок.



Чем больше у вас будет картинок, тем меньше будет повторений.

 

Реализация

Итак, давайте рассмотрим HTML код:

	<div id="wrap">
		<div id="result"></div>
		<button onclick="getImg()">Получить случайную картинку</button>
	</div>

В общем div блоке с идентификатором wrap располагается еще один div и кнопка. Блок с id result — это блок, в который будет выводиться случайная картинка. По нажатию на кнопку (событие onclick) будет выполняться функция getImg (о ней ниже), которая и будет получать и выводить случайную картинку.

CSS стили:

#wrap{    
	width: 200px;
	height: 200px;
	margin: 60px auto;
}
#result{    
	height: 200px;
}

Этими стилями я выровнял общий блок по центру, а также, благодаря заданной высоте блока с результатом, предотвратил «прыгание» кнопки во время смены картинки.

Перед тем, как разобрать код, следует кратко рассказать о логике:

У вас есть список картинок (массив ссылок на картинки), и нам нужно показать одну случайную картинку из этого списка.
Обратиться к любой из картинок можно зная её индекс (порядковое число), поэтому, для получения случайной картинки нам достаточно получить число.

Какое число нужно получить?

Нужно получить число, которое не будет превышать количество картинок в списке, но так как в JavaScript индекс массива начинается с 0 (то есть отсчет будет не с 1), то и случайное число нужно получать в диапазоне от 0 до количества картинок минус 1.

Например, у меня 10 картинок, поэтому будет сгенерировано случайное число от 0 до 9.

Теперь давайте рассмотрим JavaScript код:

<script type="text/javascript">

	var maxRandomNum;
	var randomNum;

    //Массив ссылок на картинки
    word_array = [
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/1.png',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/2.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/3.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/4.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/5.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/6.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/7.png',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/8.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/9.jpg',
		'https://sergey-oganesyan.ru/wp-content/uploads/2017/03/10.jpg',
	];
 
	maxRandomNum = word_array.length - 1;	
	 
	function getImg(){	
		randomNum = Math.round((Math.random() * (maxRandomNum - 0) + 0));
		document.getElementById("result").innerHTML = '<img src="' + word_array[randomNum] + '">';
	}
</script>

Сначала объявляем 2 переменные:

  • maxRandomNum — максимальное значение случайного числа (кол-во картинок — 1);
  • randomNum — случайное число (от 0 до maxRandomNum).

Далее идет массив (список) ссылок на картинки. Добавить или удалить картинку не составит труда — просто добавьте или удалите строчку вида:


'Ссылка на картинку',

После этого идет вычисление переменной maxRandomNum и главная функция всего урока — getImg.

Функция getImg работает так:

  • первая строчка — получаем случайное число;
  • вторая строчка — подставляем случайное число в качестве индекса массив, и полученную таким образом ссылку используем для формирования картинки, которую вставляем в блок result.

Вот и все. Вы можете посмотреть, как это работает на реальном примере, а также скачать его к себе на компьютер.

На этом данный урок подошел к завершению, желаю вам удачи, пока!

Комментарий (6)

  • Павел| 12 сентября 2018

    Спасибо большое! А можно ли получить случайную картинку по запросу (тексту) например из гугл картинок?среди всего что там найдется.

  • Начинающий| 28 октября 2018

    Данный скрипт адаптивен ли для форума?
    Например в панели окна сообщений имеется иконка «случайная картинка?

  • Начинающий| 28 октября 2018

    Например. Пользователь форума собирается написать сообщение. Открывает окно для написания текстового сообщения. В окне имеется панель со стандартными иконками(смайлы, шрифт и тд). Можно ли в эту панель установить допольнительную иконку с функцией «случайная картинка»? . В таком случае можно ли использовать данный скрипт?

    • Сергей| 28 октября 2018

      Это вопрос уже касательно функционала форума, использовать приведенный в статье скрипт можно, но вам все равно придется «допиливать» функционал форума.

  • Оставить ответ

    Ваш e-mail не будет опубликован. Обязательные поля помечены *