CULTURA

Javascript: muestra imágenes aleatorias en tu sitio

¿Cómo mostrar una imagen diferente cada vez que se carga la página web?

<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>

Intentemos entender juntos cómo funciona el guión. Primero definimos la variable img como un vector.

img = nueva matriz ()

Luego asignamos el nombre de una imagen diferente a los tres primeros elementos (foto1.jpg, foto2.jpg,…). El contenido de los tres elementos son tres valores de cadena diferentes en los que se insertan los parámetros principales de la etiqueta a través de los cuales se muestra una imagen en Html.

img[0] = ‘foto1.jpg ”ancho =” ”alto =” ”borde =” ”’;

Una vez que se define el vector y se asignan los valores de cadena, el script ejecuta la función Math.random para generar un número aleatorio de 0 a 0,999. Multiplicando este valor aleatorio por el número constante 3 obtenemos un número aleatorio de 0 a 2. El resultado de esta expresión matemática finalmente se redondea usando la función Math.floor. De esta forma obtenemos un número entero aleatorio (sin coma). Por lo tanto, la variable ran asumirá el número 0, el número 1 o el número 2 como su valor cada vez que se recargue la página web.

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

Para concluir el guión, veamos cómo usar este valor aleatorio para mostrar una imagen en lugar de otra. La última declaración muestra la etiqueta junto con el elemento de variable img[] relativo al número aleatorio (0, 1 o 2) asumido por la variable corrió.

document.write (“ «);

Para dar un ejemplo práctico, si el número aleatorio de la variable corrió fue igual a 1, el script tomará en consideración los parámetros contenidos en la variable de cadena img[1] publicar la imagen foto2.jpg en la pantalla.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar