In questo breve articolo faremo veder come fare in modo che il colore di sfondo di un elemento della pagina venga generato casualmente.
Per prima cosa ci serve una funzione javascript che generi un colore casuale, noi proponiamo questa:
function randomColor(){
var col = 'rgb('
+ (Math.floor(Math.random() * 256)) + ','
+ (Math.floor(Math.random() * 256)) + ','
+ (Math.floor(Math.random() * 256)) +
')';
return col;
}
A questo punto supponiamo di voler cambiare il colore di sfondo di un div ogni volta che ci clicchiamo sopra, supponiamo che il div in questine abbia id cambiaColore.
Il codice jQuery necessario è il seguente:
$(document).ready(function(){
$('#cambiaColore').click(function(){
$(this).css('background',randomColor());
});
});
Ovviamente questo metodo può essere utilizzato anche per cambiare il colore del testo, o altri colori, basta semplicemente inserire il codice giusto:
$(document).ready(function(){
$('#cambiaColore').click(function(){
$(this).css('color',randomColor());
});
});
Oppure si potrebbe utilizzare per dare un colore casuale allo sfondo:
$(document).ready(function(){
$('body').css('background',randomColor());
});
Insomma può essere utilizzato per assegnare un colore causale a tutto quello che ha un colore assegnato mediante i css.
Sembra ovvio, ma per far funzionare il tutto deve esserci nella stessa pagina la funzione randomColor().