Come creare una immagine casuale con Javascript

Come far visualizzare un'immagine diversa ogni volta che viene caricata la pagina web. Con Javascript è decisamente molto semplice.

Un esempio pratico

Parto da uno script già funzionante per spiegarne poi il funzionamento.

<script language="JavaScript">
img = new Array()
img[0] = 'foto1.jpg" width="" height="" border=""';
img[1] = 'foto2.jpg" width="" height="" border=""';
img[2] = 'foto3.jpg" width="" height="" border=""';
ran = Math.floor(3 * Math.random());
document.write("<img src=""+img[ran]+"">");
</script>

Apro un vettore con i nomi delle immagini

Nella prima riga del codice ho definito la variabile img come vettore.

img = new Array()

Poi ho assegnato ai primi tre elementi del vettore un nome di un'immagine diversa (foto1.jpg, foto2.jpg,...).

Il contenuto dei tre elementi sono tre valori-stringa diversi in cui sono inseriti i principali parametri del tag <img> mediante il quale si visualizza in Html un'immagine.

img[0] = 'foto1.jpg" width="" height="" border=""';

Estrapolo un valore casuale ( random )

Una volta definito il vettore e assegnati i valori di stringa, lo script esegue la funzione Math.random per generare un numero casuale da 0 a 0.999.

Moltiplicando questo valore random per il numero costante 3 ottengo un numero casuale da 0 a 2.

Il risultato di questa espressione matematica viene infine arrotondato mediante la funzione Math.floor. In questo modo ottengo un numero casuale intero (senza virgola).

La variabile ran assume come valore il numero 0, il numero 1 o il numero 2 ogni qualvolta sia ricaricata la pagina web.

ran = Math.floor(3 * Math.random());

Uso il valore random per richiamare di un elemento del vettore

Per concludere lo script utilizzo questo valore random per visualizzare un'immagine piuttosto che un'altra.

Nell'ultima istruzione viene visualizzo il tag <img src=""> insieme all'elemento della variabile img[] relativo al numero casuale (0, 1 o 2) assunto dalla variabile ran.

document.write("<img src=""+img[ran]+"">");

Per fare un esempio pratico, se il numero casuale della variabile ran fosse pari a 1 lo script prenderebbe in considerazione i parametri contenuti nella variabile stringa img[1] pubblicando a video l'immagine foto2.jpg.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Javascript

Le strutture di controllo

Gestione degli errori ed eccezioni

Le strutture cicliche

FAQ