Приветствую вас дорогие друзья! В этом небольшом уроке я покажу, как можно сделать генератор цитат!
Наверняка, на многих сайтах, вы видели блок, в котором выводятся какие-то цитаты, например, мысли великих философов.
Сделать подобное на своем сайте очень просто!
Давайте сразу рассмотрим HTML код:
<p id="citat">Время для счастья - сейчас. Место для счастья - здесь.</p> <div id="citation"></div>
Здесь имеем обычный параграф с идентификатором “citat” – в нем и выводим цитаты, а также, “div” блок, на фон которого установлено изображение какого-то мыслителя.
CSS код:
#citat{ color: #333; width: 440px; height: 30px; margin: 0 auto; text-align: center; } #citation{ width: 147px; height: 180px; margin: 20px auto; text-align: center; background: url('/wp-content/uploads/2016/02/murdezc.png'); }
Первый блок стилей для самих цитат, второй для изображения.
Теперь рассмотрим простой JavaScript код:
window.onload = function(){ //Масcив с цитатами window.cit = [ "Лучше неуклюже танцевать, чем ходить хромая. ", "Я уважаю любые убеждения, и прежде всего те, которые несовместимы с моими.", "Душа, никогда не страдавшая, не может постичь счастья!", "Хорошего без плохого не бывает - даже школьнику на каникулы дают задание.", "Мечты, которые сбываются - не мечты, а планы.", "Это ужасно тяжёлая работа - ничего не делать.", "Кто умеет, делает. Кто не умеет, учит.", "Сомневаться в Боге - значит верить в него.", "Перестав быть спорной, мысль перестаёт быть интересной.", "В жизни нет иного смысла, кроме того, какой человек сам придаёт ей.", "Не будь у меня чувства юмора, я бы давно покончил с собой." ]; function citation(){ document.getElementById('citat').innerHTML = cit[Math.round((Math.random() * (cit.length - 1) + 0))]; } setInterval(citation, 4000); }
Сначала мы объявляем массив “cit” – он содержит все наши цитаты. Можно спокойно добавлять, изменять и удалять их, но будьте внимательны – после последнего элемента (после последней строчки) не нужно ставить запятой!
Далее мы создаем функцию “citation”, в которой происходит следующее:
- Генерируем случайное число от 0 до N, где N – это размер массива минус один, то есть, если в массиве 5 элементов (5 цитат), то мы генерируем случайное число от 0 до 4.
- Сгенерированное число используем в качестве индекса для массива “cit”
- Выводим цитату в параграф “P”, выбрав его по идентификатору “citat”.
- Запускаем выполнение этой функции с интервалом в 4 секунды (4000 миллисекунд).
Если необходимо изменить внешний вид, то достаточно изменить CSS стили, программный код при этом изменять не обязательно.
Вот, в принципе и всё, на этом урок завершен, как и всегда прилагаю исходный файл и демонстрационный вариант.
Demo тест
Скачать пример
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.
Крутая вещь))