Генератор случайных фраз или скрипт – волшебный шар

Данный скрипт можно приспособить для чего угодно, была бы идея 🙂 В моем случаи он использовался как аналог игрушки - Волшебный шар. Настоящей игрушке нужно задать вопрос, потом встряхнуть и она высветит какой-то случайный ответ. Так и этот скрипт. Он оформлен в виде шара, Вам остается на него нажать и он выдаст ответ. Сам скрипт я немного изменил и удалил лишнее. На его работу это не повлияло, но немного уменьшило в размере и нагрузке на сайт.

Если Вы вдруг захотите поставить на свой сайт такой вот интересный элемент, который, например, послужит развлечением для Ваших посетителей, то Вам нужно установить следующие моменты.

Для начала подключим библиотеку jquery в шапке переда закрывающимся head или подвале сайта переда закрывающимся body.

Если Вы делали ранее подключение библиотеки или она подключена по умолчанию, то пропустите этот шаг.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Потом нужно на Ваш сайт вставить javascript.

<script type="text/javascript">
		var i = 0;
		var answers = [
			"Вперед!",
			"Не сейчас",
			"Не делай<br>этого",
			"Ты шутишь?",
			"Да,<br>но позднее",
			"Думаю,<br />не стоит",
			"Не надейся<br>на это",
			"Ни в коем<br>случае",
			"Это неплохо",
			"Кто знает?",
			"Туманный ответ,<br>попробуй еще",
			"Я не уверен",
			"Я думаю,<br>хорошо",
			"Забудь<br>об этом",
			"Это возможно",
			"Определенно -<br>да",
			"Быть может",
			"Слишком<br>рано",
			"Да",
			"Конечно, да",
			"Даже<br>не думай",
			"Лучше Вам<br>пока этого<br>не знать"
		];

		$(function () {

			$('.panel-text').click(function () {
				i = Math.floor(Math.random() * answers.length)
				showText(this, answers[i]);
			}); ;

			function showText(panel, text) {

				var panel = $(panel);
				var msg = $('.message', panel);
				panel.fadeOut(500, function () {
					msg.html(text);
					panel.fadeIn(500);
				});
			}
		});
	
	</script>

Первая часть скрипта как раз те фразы, которые будут выводится после нажатия. Вы можете добавить свои или вообще заменить их полностью. Чтобы добавить свою фразу, просто пишите их через запятую и в двойных верхних скобках, как это видно на примере "Вперед!",. Тегом br выполняется перенос строки.

В нижней части указываются блоки с которыми работает скрипт - это panel-text и message. Также вы можете увидеть две цифры 500. Эти цифры отвечают за скорость анимации исчезновения и появления текста. Это скорость в миллисекундах. Следовательно 500 - это пол секунды, 1000 - секунда и тд., думаю с этим понятно.

Далее вставляем html разметку в нужное место Вашего сайта, там где Вы хотите увидеть готовый результат.

<div class="ball">
	<div class="panel-text">
		<div class="message">
			Кликните,<br>
			чтобы узнать<br>
			ответ
		</div>
	</div>
</div>

Чтобы задать внешний вид еще добавим немного CSS стилей.

.ball{
background:url(bll.png) no-repeat;
height:300px;
width:300px;
display:table-cell; 
vertical-align:middle;
}
.message{
font: 11px/125% Tahoma;
color:#fff;
}
.message:hover{
cursor:pointer;
}

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

Больше ничего не нужно. Теперь у Вас тоже есть интересный элемент, который может помочь Вашим посетителям, немного расслабится.