Recuadro dinámico en Javascript con texto que cambia

18/6/04 - 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ía, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 3 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba