Losowy element (tekst, obrazek, cytat)
HTML + CSS, PHP + MySQL Aktualizacja: 24.07.2017

Losowy element (tekst, obrazek, cytat)

Przydatną rzeczą na stronie WWW może okazać się wyświetlenie losowego tekstu lub obrazka. Tym sposobem można stworzyć bazę cytatów, krótkich porad a nawet bannerów reklamowych - pokazywanych użytkownikowi w sposób rotacyjny. Za każdym razem, gdy strona zostanie odświeżona zostanie wyświetlony nowy obrazek - czyli ta metoda pozwoli nam zaoszczędzić miejsca oraz czasu wczytywania witryny.

Krótka funkcja która spełnia powyższe założenia w PHP i JavaScript:

1. PHP

<?php
//baza tekstów
$element[]='Tekst 1';
$element[]='Tekst 2';
$element[]='Tekst 3';

//wyświetlenie losowego tekstu
print $element[array_rand($element, 1)];
?>

Stworzyliśmy tablicę $element[] która posłuży nam za bazę tekstów, spośród której zostanie wylosowany jeden element.

Losowanie tekstów będzie możliwe dzięki funkcji array_rand(). Przyjmuje dwa parametry - pierwszy to "źródło" czyli w tym przypadku tablica z tekstami, a drugi to ilość kluczy do wylosowania (pomiędzy 1 a liczbą elementów).

2. JavaScript

<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(
//tablica zawierająca bazę tekstów
'Tekst 1',
'Tekst 2',
'Tekst 3'
).random().join(''));
// ]]>
</script>

W dodawanych tekstach, cytatach - nie można używać apostrofów i przenosić tekstu do następnej linii za pomocą klawisza "Enter".

Autor: . Tagi: , , , .

Dodaj komentarz

2 komentarzy do "Losowy element (tekst, obrazek, cytat)"

avatar
najnowszy najstarszy oceniany
Marcin
Gość

Jak to przerobić aby wyświetlało się kilka elementów ale w różnej kolejności, elementy ma namyśli przydzielenie np. do diva classy lub id, czyli cały div aby z innymi zamieniał się miejscami??

Comandeer
Gość

W PHP zaleca się stosowanie echo zamiast print - ponoć szybsze. Odnośnie sposobu z JS: document.write używało się 10 lat temu, gdy o DOM nikt nie słyszał. Dziś robi się to za pomocą getElementById('jakis_div').appendChild(document.createTextNode(new Array([tu te cytaty].random().join(''))) (lub innerHTML, jak kto woli).
Dzięki za metodę random obiektu Array - na pewno się przyda ;D