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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Получить

Метки:

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

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

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

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