Вывод случайного контента на странице

Иногда бывает необходимость показать контент из некоторого набора. В этой статье мы разберем, как показать текст случайным образом.


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

Объект Math и случайные числа


Механизм формирования случайных чисел не сложен. Это простая математическая формула, результат которой зависит от некоторого параметра, который быстро изменяется во времени. Чаще всего выбирается как раз время. Например, значение в миллисекундах. Написать собственную функцию не сложно, но в каждом языке программирования уже есть описанный механизм.
В JavaScript это метод random() математического объекта MATH. Он возвращает случайное число в промежутке от 0 до 1, при этом единица исключена из промежутка. Чтобы получить число из промежутка от a до b, необходимо воспользоваться формулой:
Math.random() *(b-a)+a
Представим промежуток в виде отрезка. Тогда умножая на разность, мы «растягиваем» промежуток 0-1 до длины нужного нам отрезка. А прибавляя а мы получаем сдвиг вправо всего промежутка. На схема показано получение отрезка от 1 до 6.

Для округления полученного числа нам нужен метод округления. Вообще у объекта MATH их три:
  • floor(n) – возвращает целое число, меньшее или равное переданному значению.
  • ceil(n) – возвращает целое число, большее или равное переданному значению.
  • round(n) – возвращает значение, округленное до ближайшего целого.
Мы воспользуемся последним. Он позволит включить в промежуток правую границу. Ведь у метода random() она исключена – он никогда не возвращает 1.

Случайный текст


Покажем, как выбрать новость для показа пользователю.
Сначала разместим в нашем шаблоне текст для новости и настроим его отображение на правой панели.

Текст будет храниться в виде массива. Каждый отдельный элемент будет представлять новость. Нумерация элементов массива начинается с 0.
news=new Array()
  news[0]="5 фунтовая купюра с новым водонепроницаемым дизайном вышла в Великобритании. Благодаря новому дизайну купюра стала более долговечной и защищенной от подделки.";
  news[1]="Компания Mozilla по разработке программного обеспечения проводит совместную работу с дизайн-консультантом Johnson Banks по созданию новой айдентики своего бренда, а так же проводит опрос мнений широкой общественности о ребрендинге.";
  news[2]="Многопрофильной дизайн компании Osborne Ross (MULTI-DISCIPLINARY DESIGN CONSULTANCY) было поручено создать эту симпатичную и необычную коллекцию марок животных, цель которой сделать отправку почтовых сообщений более увлекательной.  "
На следующем этапе мы получим случайное число в промежутке от 0 до 2. Это можно сделать двумя способами:
n=Math.round(Math.random()*3)
n=Math.round(Math.random()*10)%3
Во втором случае мы используем более длинный промежуток и получаем число 0, 1 или 2 как остаток от деления на 3. Считается, что при таком способе вероятность отсутствия идущих подряд повторов выше.
Для вывода новости воспользуемся свойством innerHTML, которое позволяет вставить текст непосредственно в код.
document.getElementById("idbde7e727-ec66-7964-3ba4-2c431c894640").innerHTML=news[n]
ID селектора было получено через буфер обмена.

Добавьте после текста виджет «HTML-код». Следите, чтобы он был именно после текста, иначе при загрузке JavaScript попытается изменить элемент, которые еще не загружен. Возникнет ошибка. Проверьте в левой панели порядок размещения элементов.

Попробуйте опубликовать свою страницу. Зайдите на нее и несколько раз нажмите кнопку «Обновить». Вы увидите, что новость изменяется.

Случайное изображение


Загрузите изображения в редакторе. Для этого воспользуйтесь правой панелью инструментов.

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

Вы получите такую строку:
http//award.pixli.ru/images/images4186/mini/butterfly.jpg
удаляем из нее лишнее и получаем адрес.
images/images4186/butterfly.jpg
Вставляем изображение на страницу и после него виджет «HTML-код». Создаем массив и прописываем в качестве его значений
imgs=new Array("images/images4186/butterfly.jpg","images/images4186/fish.jpg","images/images4186/flower.jpg")
Получаем ID блока, в котором размещено изображение. Редактор устроен таким образом, что у картинки нет своего идентификатора. Поэтому нам надо будет обратиться к нему с помощью команды:
document.getElementById("id130c636a-39eb-3d7b-78fa-12adacedb42b").getElementsByTagName('img')[0].src=imgs[n]
Здесь мы получаем ссылку на блок, а затем на массив его дочерних элементов img. Берем первый.
Присваивая к свойству src новый адрес, мы реализуем смену картинки на экране.
Полный код выглядит следующим образом:
<script>
  imgs=new Array("images/images4186/butterfly.jpg","images/images4186/fish.jpg","images/images4186/flower.jpg")
  n=Math.round(Math.random()*10)%3
document.getElementById("id130c636a-39eb-3d7b-78fa-12adacedb42b").getElementsByTagName('img')[0].src=imgs[n]
</script>

Случайная ссылка


Механизм работы тот же. Только нам нет необходимости размещать ссылку. Она будет формироваться при загрузке. Поэтому мы вынесем на экран блок, в котором будет появляться ссылка. После него разместим виджет «HTML-код».
Нам понадобится два массива – в одном хранятся адреса, а во втором текст ссылки. В остальном действуем по той же схеме.
<script>
  links=new Array("http://yanex.ru","http://mail.ru","http://gooogle.ru")
  textLinks=new Array ("яндекс", "почта","гугл")
  n=Math.round(Math.random()*10)%3
document.getElementById("idbd6e9cce-6906-f983-a531-d55eedbf9e70").innerHTML="<a href='"+links[n]+"'>"+textLinks[n]+"</a>"
</script>
Последняя строка формирует ссылку и ее текст из двух массивов.

Заключение


Размещение случайного контента – задача несложная. Надо лишь иметь представление об объекте MATH и его методах. Умение же использовать рандомные числа дает разработчику много возможностей.
03 июня 2017, 12:18    Ivan Web-дизайн 0    3 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.