Как создать генератор цитат для сайта с помощью javascript?

Приветствую вас дорогие друзья! В этом небольшом уроке я покажу, как можно сделать генератор цитат!

Наверняка, на многих сайтах, вы видели блок, в котором выводятся какие-то цитаты, например, мысли великих философов.

Сделать подобное на своем сайте очень просто!

Давайте сразу рассмотрим 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 стили, программный код при этом изменять не обязательно.

Вот, в принципе и всё, на этом урок завершен, как и всегда прилагаю исходный файл и демонстрационный вариант.

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.