Java Script podbija internet a biblioteki lotne (np. JQuery czy Prototype) dają niesamowite możliwości. Co jeśli zajdzie potrzeba wykonania losowych elementów na stronie z pewnego zbioru a możliwości techniczne wskazują na Java Script ? Najlepiej elemnty ułożyć w tablicy i za pomocą funkcji wylosować określoną ilość elementów.
Tworzymy tablicę JS
Chcemy otrzymać efekt losowości np. filmików - zwiastunów na stronie. Najpierw wrzućmy nasze zasoby do tablic.
Aby utworzyć tablicę możemy posłużyć się przykładowo następującym kodem:
var table_trailer = new Array(
'film1',
'film2',
'film3',
'film4',
'film5',
'film6'
);
Funkcja losująca
Następnie stwórzmy sobie funkcję, która będzie zwracać losowe elementy (w parametrach tej funkcji będziemy przesyłać naszą tablicę i liczbę elementów losowych, które chcemy uzyskać):
function array_rand(input, num_req) {
// discuss at: http://phpjs.org/functions/array_rand/
// original by: Waldo Malqui Silva
// example 1: array_rand( ['Kevin'], 1 );
// returns 1: 0
var indexes = [];
var ticks = num_req || 1;
var checkDuplicate = function(input, value) {
var exist = false,
index = 0,
il = input.length;
while (index < il) {
if (input[index] === value) {
exist = true;
break;
}
index++;
}
return exist;
};
Funkcja zwróci nam indeksy losowe z naszej tablicy, my sobie zapiszemy to w następujący sposób:
table_trailer2 = array_rand(table_trailer,3);
var index1 = table_trailer2[0];
var zwiastun1 = table_trailer[index1];
//alert(zwiastun1);
var index2 = table_trailer2[1];
var zwiastun2 = table_trailer[index2];
//alert(zwiastun2);
var index3 = table_trailer2[2];
var zwiastun3 = table_trailer[index3];
Mamy wylosowane indeksy, w naszym przykładzie w drugim parametrze funkcji array_rand daliśmy "3" gdyż chcemy 3 losowe elementy ,mamy również tablicę w całości, nie pozostaje nic innego jak wypisanie losowych elementów na stronie. Z racji, że na co dzień korzystam z JQuery wykonam powyższe zadanie za pomocą funkcji html:
$('.trailer1').html(zwiastun1);
$('.trailer2').html(zwiastun2);
$('.trailer3').html(zwiastun3);
Całość dla szybkich koderów
Dla leniwych, którzy nie mają czasu na rozkminkę i poznawanie mechanizmu losowania wklejam poniższy kod w całości. (Uwaga potrzebna jest załączona biblioteka Jquery)
function array_rand(input, num_req) {
// discuss at: http://phpjs.org/functions/array_rand/
// original by: Waldo Malqui Silva
// example 1: array_rand( ['Kevin'], 1 );
// returns 1: 0
var indexes = [];
var ticks = num_req || 1;
var checkDuplicate = function(input, value) {
var exist = false,
index = 0,
il = input.length;
while (index < il) {
if (input[index] === value) {
exist = true;
break;
}
index++;
}
return exist;
};
if (Object.prototype.toString.call(input) === '[object Array]' && ticks <= input.length) {
while (true) {
var rand = Math.floor((Math.random() * input.length));
if (indexes.length === ticks) {
break;
}
if (!checkDuplicate(indexes, rand)) {
indexes.push(rand);
}
}
} else {
indexes = null;
}
return ((ticks == 1) ? indexes.join() : indexes);
}
$(document).ready(function() {
var table_trailer = new Array(
'film1',
'film2',
'film3',
'film4',
'film5',
'film6'
);
table_trailer2 = array_rand(table_trailer,3);
var index1 = table_trailer2[0];
var zwiastun1 = table_trailer[index1];
//alert(zwiastun1);
var index2 = table_trailer2[1];
var zwiastun2 = table_trailer[index2];
//alert(zwiastun2);
var index3 = table_trailer2[2];
var zwiastun3 = table_trailer[index3];
//alert(zwiastun3);
$('.trailer1').html(zwiastun1);
//$('.trailer1').appendTo(zwiastun1);
//$('.trailer2').appendTo(zwiastun2);
$('.trailer2').html(zwiastun2);
//$('.trailer3').appendTo(zwiastun3);
$('.trailer3').html(zwiastun3);
});
