Recuadro dinámico en Javascript con texto que cambia

  • Por
Taller de Javascript en el que se realiza un recuadro cuyo texto cambia en cada impresión de la página, con lo que se pueden mostrar distintos mensajes en cada visita.
Realizamos un sencillo script en Javascript para realizar un cuadro con información dinámica, que cambia con cada impresión de la página. El ejercicio consiste en una tabla HTML que muestra una información que cambia, utilizando Javascript para que nos proporcione un texto aleatorio, que luego imprimiremos dentro de la tabla HTML.

Para empezar vamos a ver cómo obtener un texto aleatorio. La idea a desarrollar es bien simple. Creamos un array con los distintos textos, entre los que se escogerá uno aleatoriamente. Se obtiene un valor numérico aleatorio entre 0 y máximo índice del array y se imprime el texto que hay en el array en esa posición aleatoria.

function texto_aleatorio(){
   var textos = new Array()
   textos[0] = "Tenemos los mejores productos del mercado, con controles de    calidad intensivos."
   textos[1] = "Distribuimos en todo el mundo con los mejores tiempos de    entrega y fiabilidad de los envíos."
   textos[2] = "No tenemos competidores que nos hagan sombra. Contrate con    nosotros y compuébelo. Así de fácil."
   textos[3] = "Disponga del mejor servicio de atención al cliente y una    respuesta rápida a sus problemas."
   textos[4] = "Los mejores servicios, productos y, como no, los menores    precios. Todo son ventajas."

   aleat = Math.random() * (textos.length)
   aleat = Math.floor(aleat)

document.write(textos[aleat])
}


En la primera línea se crea el array y en las siguientes se inicializan sus distintas casillas con textos variados. Tal como hemos hecho el ejercicio, el número de casillas que tenga el array es indiferente, por lo que podríamos aumentar sus casillas, introduciendo nuevas frases, y así las posibilidades de textos serán más variadas.

Más adelante en la función se obtiene un número aleatorio. Para obtenerlo utilizamos la clase Math, concretamente el método random(). Random devuelve un valor decimal aleatorio entre 0 y 1. Algo como 0.453. Si multiplicamos ese valor por el número de casillas del array obtendremos un número entre 0 y el número de casillas, pero todavía tiene valores decimales y nosotros deseamos que sea entero para poder utilizarlo como índice en el array. Para convertir ese valor a entero, lo redondeamos hacia abajo con floor(), que devuelve el número más próximo, redondeando por abajo.

En las última línea de la función se imprime el valor aleatorio.

El código HTML del recuadro

<table width="180" border="0" cellspacing="1" cellpadding="2" bgcolor="000000">
   <tr>
   <td class="barraa" bgcolor="993333"><font color="#FFFFFF"><b>Nuestras ventajas</b></font></td>
   </tr>
   <tr>
    <td class="fuente8" bgcolor="#FFFFFF"><script language=javascript>texto_aleatorio()</script></td>
   </tr>
</table>


Es una tabla HTML muy sencilla. Simplemente muestra una celda con el encabezado o titular de la caja y una segunda celda en la que simplemente hay una llamada a la función que escribe el texto aleatorio.

El resultado puede verse en una página aparte. Tener en cuenta que hay que actualizar la página para ver como van mostrandose distintos mensajes, entre todos los que hemos configurado.

Este ejemplo puede complicarse todo lo que se desee para crear páginas dinámicas que cambien los contenidos entre distintos accesos del visitante. Podríamos hacer que incluyesen diferentes elementos aleatorios, como imágenes, animaciones, enlaces, etc.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

roger

11/2/2006
Hola, solo tengo una duda y espero que me puedan ayudar. Este articulo es muy interesante, ademas me gustaria que estos textos tuvieran un link cada uno, como podria ser eso.
Gracias.

Maleni

27/2/2007
Es muy interesante... podrías dar un ejemplo de como quedaría el array si llevara texto e imagen???

Muchísimas gracias!

Marcelo

30/10/2007
asumo que por la fecha de los comentarios, ya deben haber solucionado la duda ^^
pero, la idea es incluir codigo html dentro de elemento del arreglo
por ejemplo, al mismo ejemplo anterior agregar:

textos[5]='<a href="http://enlace.com/"><img src="imagen.jpg"></a>'

notar el cambio a comilla simples para poder incluir comillas dobles dentro del texto a guardar en el arreglo

luis

09/8/2009
no entiendo
disculpa mi ignorancia pero como puedo unir los 2 codigos

pepe

06/6/2016
respuesta
luis eres un platano, eso lo sabe hasta un mono