259 Эта статья подойдет тем, кто делает или будет делать проект, где необходимо менять содержимое формы, состоящей из полезных советов типа — «А вы знали?».
Например, есть 8-10 абзацев текста и надо, чтобы отображался только один из них, выбранный случайным образом.
Данный метод хорошо подойдет для статичных сайтов.
Давайте начнем:
Составляем из подсказок «А вы знали?» ненумерованный список:
|
1 2 3 4 5 6 7 |
<ul id="tips"> <li>... если вы хотите быть лучшим кодером, вам нужно есть овощи?</li> <li>... что дольше? приготовить пиццу или сделать сайт?</li> <li>... вы проверяете свой код на правильность?</li> <li>... jQuery ваш друг? Реально!</li> <li>... вы сможете выучить CSS за 3 часа?</li> </ul> |
Идея заключается в том чтобы скрыть все подсказки, затем случайно показывать только одну из них, используя JavaScript.
И так, чтобы отформатировать и скрыть текст, мы используем следующий CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#tips, #tips li{ margin:0; padding:0; list-style:none; } #tips{ width:250px; font-size:16px; line-height:120%; } #tips li{ padding:20px; background:#e1e1e1; display:none; /* hide the items at first only */ } |
Подводным камнем этого решения может стать то, что сначала все подсказки скрыты. Так пользователь с неработающим JavaScript и включенным CSS не сможет увидеть их (подсказки) вообще, в то время как пользователь с отключенными JS/CSS (так же как и в поисковой машине) увидит их все.
Чтобы показать одну из подсказок случайно, нам нужно использовать маленький jQuery скрипт. Конечно, вам придется скачать jQuery, положить его куда-нибудь на своем сервере и вставить ссылку на него в head тэг вашего документа.
|
1 |
<script type="text/javascript" src="js/jquery.js"></script> |
Ниже добавьте следующий скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> this.randomtip = function(){ var length = $("#tips li").length; var ran = Math.floor(Math.random()*length) + 1; $("#tips li:nth-child(" + ran + ")").show(); }; $(document).ready(function(){ randomtip(); }); </script> |
Коротко, не правда ли?
Просмотрите примеры (обновите страницу несколько раз), чтобы увидеть, как это работает.
Следующий шаг
Если такие простые функциональные возможности вас не удовлетворили, то вот вам еще.
С небольшим изменением вышеупомянутого кода, мы сможем плавно скрывать и показывать подсказки, чередующиеся случайным образом. И конечно, этот код не позволит одной и той же подсказке показываться дважды за весь период чередования.
Заметьте, что вы сможете менять длину паузы между чередованиями картинок.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script type="text/javascript"> this.randomtip = function(){ var pause = 4000; // define the pause for each tip (in milliseconds) var length = $("#tips li").length; var temp = -1; this.getRan = function(){ // get the random number var ran = Math.floor(Math.random()*length) + 1; return ran; }; this.show = function(){ var ran = getRan(); // to avoid repeating while (ran == temp){ ran = getRan(); }; temp = ran; $("#tips li").hide(); $("#tips li:nth-child(" + ran + ")").fadeIn("fast"); }; show(); setInterval(show,pause); }; $(document).ready(function(){ randomtip(); }); </script> |
Просмотрите пример, чтобы увидеть его в действии.
Спасибо, за внимание.)
