пятница, 24 июня 2011 г.

JavaScript. Случайная фраза из списка

Итак, у нас есть список наших любимых фраз, цитат, анекдотов или чего-то там ещё. Нужно выбрать наугад одну из этих фраз и показать у себя на сайте или в бложике, чтобы тем самым порадовать себя и позабавить посетителей. Для бложика перейдите в «Дизайн», добавьте новый гаджет «HTML/JavaScript» и скопируйте туда следующий код:

<div id="myphrase">
</div>
<script type="text/javascript">
var div = document.getElementById("myphrase");
var lst = new Array();
lst.push("Моя любимая фраза номер один.");
lst.push("Моя любимая фраза номер два."); 
lst.push("Моя любимая фраза номер три."); 
lst.push("..."); 
lst.push("Моя любимая фраза номер стопицот."); 
div.innerHTML = lst[Math.floor(Math.random() * lst.length)];
</script>

Пример работы этого скрипта можно видеть справа (под ссылкой на мой профиль). Фраза меняется при каждом обновлении страницы. Учтите только, что если в вашем списке мало фраз, то одна и та же фраза может радовать ваш взор несколько раз подряд. А чем фраз больше, тем, соответственно, меньше вероятность выбора одной и той же.

Первая строка кода — это блок div, в котором будет помещаться выбранная фраза. При желании можно поработать со стилем этого блока, задав, к примеру, цвет текста или шрифт. В таком случае первая строка примет какой-то такой вид:

<div id="myphrase" style="color: green; font-size: small; font-style: italic;">
</div>

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

При помощи строк lst.push("какой-то текст"); мы добавляем наши фразы. Строчек этих можно добавить сколько угодно, но не забывайте про точку с запятой в конце каждой строки. Кстати, в тексте фраз можно использовать теги HTML.

4 комментария:

  1. спасибо большое. Очень полезно!

    ОтветитьУдалить
  2. Пожалуйста! Я очень рад, что помогло! :)

    ОтветитьУдалить
  3. Спасибо! Завтра же опробуем вашу наработку :)

    ОтветитьУдалить
  4. Рад помочь! Можно и ещё что-нибудь на Жаваскрипте реализовать, главное — идею придумать! :)

    ОтветитьУдалить

Го вверх!