Последняя модификация: 10.08.2014 г

Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/random.html

Псевдослучайные элементы.

1. Баннерокрутилка на JavaScript
2. Баннерокрутилка на PHP

Иногда может потребоваться включать в страницы один или несколько элементов из некоего набора элементов, так, чтобы они, по возможности не повторялись и, на достаточно большом количестве страниц были представлены все. Это может понадобиться для вывода на страницу каких-нибудь девизов или анекдотов, из заранее подготовленного списка, или рекламы товаров и услуг. Часто это применяется для прокрутки баннеров (возможность устроить собственную баннерную сеть).

Баннерокрутилка на JavaScript

С применением JavaScript, в том месте страницы, где должен произойти вывод, можно вставить следующий код:

<SCRIPT LANGUAGE="JavaScript" src="baners.js"></SCRIPT>

Остальное будет находиться в отдельном файле «baners.js», который будет загружаться только с первой страницей и, в дальнейшем, выполнятся прямо из кэша на компьютере посетителя, уменьшая, тем самым, трафик и время загрузки остальных страниц. Кроме того, при необходимости откорректировать код, корректировать придется только один файл «baners.js», а не все файлы, в которых должен отобразиться результат.

Код файла baners.js основан на генерации случайного числа. Некоторые дизайнеры используют для этого конструкцию типа:

var j=(new Date()).getSeconds() % 3;

Довольно странный способ получить случайное число.

Другие используют округление случайного числа, умноженного на 10 в какой-нибудь степени:

rndnum = Math.round(Math.random() * 10000);

Однако, есть способ получше:

Math.floor(Math.random()*n) где n - верхняя граница диапазона (случайное число от 0 до n, НЕ включая n).

Приведу пример баннерокрутилки:

baners.js

strcount=2;// сколько строк выводить

ar=[ // поскольку случайный элемент удобно брать из массива, создаем массив данных
"Мы не можем знать заранее высоту или ширину окна браузера у посетителя сайта, но можем определить их с помощью <font color=red>document.body.clientHeight</font> и <font color=red>document.body.clientWidth</font> (для Нетскейпа это <font color=red>window.innerHeight</font> и <font color=red>window.innerWidth)</font>", 
"<font color=red>document.body.scrollHeight</font> возвращает полную высоту загруженной части документа с учетом возможной прокрутки", 
"Для автоматической переброски на другую страницу следует использовать либо скрипт <font color=red>window.location.href ='НОВЫЙ_АДРЕС'</font>, либо тег <font color=red><meta http-equiv='refresh' content='0;URL=НОВЫЙ_АДРЕС'></font>", 
"Для возможности быстро корректировать баннерные коды, их лучше включать в страницу либо по SSI-внедрению, либо как внешний JavaScript"
]; 

datacount=ar.length;// количество данных (максимальный индекс элемента)
if(strcount > datacount){
	strcount=datacount; // если количество выводимых строк превысило количество данных,
	// количество выводимых строк сравняем с количеством данных и будем выводить все, просто в случайном порядке
}

a='';
for (i = 0; i < strcount; i++) {// выбрать номер индекса для всех строк
	do{
		value=Math.floor(Math.random()*datacount);// получим случайное число от 0 до datacount и превратим его в строку
	}while(a.indexOf("'"+value+"'")>=0);// пока не выпадет еще не используемый номер (исключение повторов)
	// поскольку в яваскрипте нет поиска значений в массиве и, чтоб не делать цыкл со сравнением элементов
	a=a+"'"+value+"'"; // занесем значения в строку, обрамив кавычками
	document.writeln('<p>'+ar[value]);// вывести строку с таким номером
}

Этот код легко адаптировать под любое количество баннеров. Легко адаптировать под другие задачи. При любом способе применения, скрипт даст положительный эффект, ведь даже на одной и той же странице, при каждой ее перезагрузке, постоянно будет что-то новенькое. Так можно внести разнообразие даже в статический материал.

Для примера ниже продемонстрирован вывод "Советов дня" по одному из 4-х заранее заготовленных советов. Кнопка "Обновить" позволит просмотреть другие советы (если на вашей странице нужно листать советы, то лучше добавить кнопку, которая заново вызовет только сам скрипт советов).

Баннерокрутилка на PHP

В некоторых ситуациях лучше применить не скрипт, обрабатываемый браузером, а скрипт, обрабатываемый сервером. Таким скриптом может быть, скрипт на PHP, включенный в страницу инструкцией

<!--#include virtual="/_rand.php" -->

Не буду изобретать велосипед, а продемонстрирую готовый, недавно написанный скрипт.

Задача скрипта заключается в выведении 6 случайных строк. Вот содержимое файла _rand.php.

_rand.php

<?php
@$ar=file('slova.txt');// откуда брать данные
if(@$ar){
	$strcount=6;// сколько строк выводить

	$datacount=(sizeof($ar));// количество данных (максимальный индекс элемента)
	if($strcount > $datacount){
		$strcount=$datacount; // если количество выводимых строк превысило количество данных,
		// количество выводимых строк сравняем с количеством данных и будем выводить все, просто в случайном порядке
	}
	$datacount--;// уменьшим индекс, с учетом того, что нумерация идет с ноля

	$a=array();
	for ($i = 0; $i < $strcount; $i++) {// выбрать номер индекса для всех строк
		do{$value=mt_rand(0, $datacount);}while(in_array($value,$a));// пока номер совпадает с теми, что уже выбраны
		$a[$i]=$value;// при получении уникального номера добавить в массив
		echo '<p>'.$ar[$value];// вывести строку с таким номером
	}

	unset($a,$datacount,$strcount,$value);
}
unset($ar);
?>

Затрудняюсь сказать, какой код проще и надежней. Выбор между JavaScript и PHP в данном случае, скорее, зависит от личных предпочтений.

Комментарии к странице (всего 1)

 

 

 

---

На главную страницу сайта