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



Приветствую вас дорогие друзья! В этом небольшом уроке я покажу, как можно сделать генератор цитат!
Как создать генератор цитат для сайта с помощью 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('https://sergey-oganesyan.ru/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 тест

Скачать пример

Комментарий (1)

  • seoonly.ru| 21 апреля 2016

    Крутая вещь))

  • Оставить ответ

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