Представляю Вашему внимаю замечательный скрипт, с помощью которого можно делать random любых элементов на странице, главное чтобы эти элементы были помещены внутри тегов <div> с классом quotes. Очень хорошо этот скрипт подходит, например, для рендома цитат на странице.
Пример:
HTML
1 |
<div class="quotes">ТУТ ЛЮБОЙ HTML</div> |
Class=»quotes» — обязателен. Без него скрипт не будет работать.
Html может быть любым. Можно даже сделать рендом картинок.
В нашем примере HTML выглядит так:
1 2 3 |
<div class="quotes"><em>"Nothing is more fairly distributed than common sense: no one thinks he needs more of it than he already has."</em><br/><br/><span class="alignright">-- Rene Descartes</span></div> <div class="quotes"><em>"Our virtues and our failings are inseparable, like force and matter. When they separate, man is no more."</em><br/><br/><span class="alignright">-- Nikola Tesla</span></div> <div class="quotes"><em>"Better to illuminate than merely to shine, to deliver to others contemplated truths than merely to contemplate."</em><br/><br/><span class="alignright">-- Thomas Aquinas</span></div> |
CSS
Для того, чтобы рендом работал, изначально все блоки на странце нужно скрыть. Это делаем с помощью CSS.
Вставьте в файл CSS стилей:
1 |
.quotes {display:none;} |
JS
Под всеми HTML блоками добавляем Javascript. В сам скрипт не нужно вносить никакие изменения.
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 |
<script type="text/javascript"> //I. Задаем переменные //узнаем длину массива number = document.getElementsByClassName('quotes'); //определяем отдельную переменную для каждого class quotes в массиве var randomquote = []; for (i=0; i<=number.length; i++) { randomquote[i] = document.getElementsByClassName('quotes')[i]; randomquote.push(randomquote[i]); } //II. Функция генерирующая число от 0 до n function randomzero (n) { return ( Math.floor ( Math.random ( )*0.9999999999999999* (n + 1)) ); } //III. assign any random number from 0 to number1 to x. var number1 = number.length-1; x = randomzero(number1); //IV. Показать цитату randomquote[x].style.display = 'block'; </script> |
2 блока текста
Если нужно вывести два блока, при чем, чтобы они НЕ повторялись, тогда скрипт будет такой:
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 34 35 36 37 38 39 40 41 |
<script type="text/javascript"> //I. Задаем переменные //узнаем длину массива number = document.getElementsByClassName('quotes'); //определяем отдельную переменную для каждого class quotes в массиве var randomquote = []; for (i=0; i<=number.length; i++) { randomquote[i] = document.getElementsByClassName('quotes')[i]; randomquote.push(randomquote[i]); } //II. Функция генерирующая число от 0 до n function randomzero (n) { return ( Math.floor ( Math.random ( )*0.9999999999999999* (n + 1)) ); } function randomzero1 (m) { return ( Math.floor ( Math.random ( )*0.9999999999999999* (m + 1)) ); } //III. assign any random number from 0 to number1 to x. var number1 = number.length-1; x = randomzero(number1); y = randomzero1(number1); while (x==y) { y = randomzero1(number1); } //IV. Показать цитату randomquote[x].style.display = 'block'; randomquote[y].style.display = 'block'; </script> |
По-моему, очень не плохо получилось.