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: , , , .

2
Dodaj komentarz

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
MarcinComandeer Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

najnowszy najstarszy oceniany
Marcin
Gość
Marcin

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ść
Comandeer

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