Создаем генератор случайных цитат с помощью JSON

Создаем генератор случайных цитат с помощью JSON

От автора: встречать пользователя на своем сайте случайной цитатой – популярный способ персонализации пользовательского опыта. Часто цитаты хранятся в отдельном файле, но если их немного, десять или меньше, намного эффективнее хранить их прямо на странице в скрипте.

Магазин мудрости

Каждая цитата всегда состоит из двух компонентов: цитаты и автора, из-за чего JSON массив идеально подходит для хранения такой информации:

Разметка на странице пустая: если JS не отработает, на экране просто ничего не отобразится. Или же можно вставлять в теги цитату по умолчанию.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Функция рисует случайную цитату из JSON структуры и помещает ее как innerText параграфа при помощи шаблонных строк. Похожий процесс повторяется для автора:

Функция вызывается сразу после загрузки страницы:

Цитаты по требованию

В CodePen демо к этой статье есть кнопка, генерирующая новые цитаты:

По клику по кнопке также вызывается randomQuote:

Повторения цитат

Скрипт не дает гарантии того, что новая случайная цитата не будет той же самой. Чем больше цитат, тем меньше вероятность повтора. Однако она никогда не будет нулевой. Чтобы цитаты не повторялись, ключи можно удалять из JSON объекта после их выбора. Также можно хранить массив использованных цитат и проверять новые на совпадение.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree