Как создать генератор цитат для сайта с помощью 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('http://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 тест

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


Хостинг, которым я пользуюсь: Good-Host


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

  1. seoonly.ru пишет:

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

Оставить комментарий

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

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>