Javascript random text – рандом текста на странице

Представляю Вашему внимаю замечательный скрипт, с помощью которого можно делать random любых элементов на странице, главное чтобы эти элементы были помещены внутри тегов <div> с классом quotes. Очень хорошо этот скрипт подходит, например, для рендома цитат на странице.

Пример:

HTML

<div class="quotes">ТУТ ЛЮБОЙ HTML</div>

Class=”quotes” – обязателен. Без него скрипт не будет работать.
Html может быть любым. Можно даже сделать рендом картинок.

В нашем примере HTML выглядит так:

<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 стилей:

.quotes {display:none;}

JS

Под всеми HTML блоками добавляем Javascript. В сам скрипт не нужно вносить никакие изменения.

<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 блока текста

Если нужно вывести два блока, при чем, чтобы они НЕ повторялись, тогда скрипт будет такой:

<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>

По-моему, очень не плохо получилось.

Попробовать в редакторе