Przejdź do treści

Losowy element

Często przydatną funkcją na stronie WWW może okazać się wyświetlenie losowego tekstu lub obrazka. Można w ten sposób np. zbudować bazę cytatów albo porad i prezentować je użytkownikowi losowo - jeden przy każdym wejściu na stronę. Innym zastosowaniem może być rotacja bannerów lub buttonów. Jeśli chcesz umieścić na swojej stronie kilka bannerów, ale masz na to tylko jedno miejsce, wstaw tam właśnie ten skrypt, dzięki czemu przy każdym wejściu będzie losowany i wyświetlany tylko jeden z bannerów. Takie rozwiązanie jest szeroko stosowane w wielu portalach, które wymieniają się bannerami i buttonami z innymi serwisami. Pozwala to zaoszczędzić miejsce na stronie i skrócić czas wczytywania, ponieważ za każdym razem ładowany jest tylko jeden obrazek.

Aby wstawić na stronę losowy tekst lub obrazek, należy w wybranym miejscu dokumentu wkleić następujący kod:

<script type="text/javascript">
// <![CDATA[
Array.prototype.random = function(limit)
{
	if (typeof limit == 'undefined' || limit < 0) limit = 1;
	else if (!limit) limit = this.length;
	for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++)
	{
		do { var index = Math.random(); } while (index == 1);
		index = Math.floor(index * n);
		target.push(source[index]);
		source[index] = source[--n];
	}
	return target;
}

document.write(new Array(
// Tu wpisz kolejne elementy:

'Tekst 1',
'Tekst 2',
'Tekst 3'

).random().join(''));
// ]]>
</script>
gdzie:
Tekst 1, Tekst 2, Tekst 3...
Kolejne teksty, które mają być wyświetlane losowo (jeden przy każdym wejściu na stronę). Można tutaj wpisywać dowolne znaczniki - również <img /> i stworzyć w ten sposób np. rotator bannerów lub buttonów. Niedozwolone jest jedynie używanie apostrofów i przenoszenie tekstu do następnej linii za pomocą klawisza Enter. Pamiętaj również, że każdy tekst musi być ujęty w apostrofy oraz po każdym wpisie (oprócz ostatniego!) należy postawić przecinek.

Przykład:

(odśwież stronę, aby zobaczyć zmianę)

Kilka losowych elementów

Czasem może zajść konieczność wyświetlenia na ekranie kilku losowych elementów. Teoretycznie można w tym celu po prostu wstawić powyższy skrypt wymaganą ilość razy, ale wtedy mogłaby zajść sytuacja, w której wylosowane elementy będą się powtarzały. Aby tego uniknąć należy użyć następującego skryptu (w wyróżnionym miejscu należy podać ilość elementów do wyświetlenia):

<script type="text/javascript">
// <![CDATA[
Array.prototype.random = function(limit)
{
	if (typeof limit == 'undefined' || limit < 0) limit = 1;
	else if (!limit) limit = this.length;
	for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++)
	{
		do { var index = Math.random(); } while (index == 1);
		index = Math.floor(index * n);
		target.push(source[index]);
		source[index] = source[--n];
	}
	return target;
}

document.write(new Array(
// Tu wpisz kolejne elementy:

'Tekst 1',
'Tekst 2',
'Tekst 3'

).random(3).join(''));

// ]]>
</script>

Przykład:

(odśwież stronę, aby zobaczyć zmianę)

Wszystkie elementy w kolejności losowej

Aby wyświetlić wszystkie wpisane elementy, z tym że w losowej kolejności, wystarczy w wyróżnionym miejscu wpisać liczbę 0 (zero):

<script type="text/javascript">
// <![CDATA[
Array.prototype.random = function(limit)
{
	if (typeof limit == 'undefined' || limit < 0) limit = 1;
	else if (!limit) limit = this.length;
	for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++)
	{
		do { var index = Math.random(); } while (index == 1);
		index = Math.floor(index * n);
		target.push(source[index]);
		source[index] = source[--n];
	}
	return target;
}

document.write(new Array(
// Tu wpisz kolejne elementy:

'Tekst 1',
'Tekst 2',
'Tekst 3'

).random(0).join(''));

// ]]>
</script>

Przykład:

(odśwież stronę, aby zobaczyć zmianę)

Komentarze

Zobacz więcej komentarzy