Recuadro dinámico en JavaScript

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.

Autor: Blasten
http://www.blasten.com/contenidos/Recuadro_dinamico

Usuarios que han visto este tema también han visto...

- Tabla de colores con Javascript
- Busqueda en lista
- Pop-Up para imágenes en un mismo archivo en JavaScript
- Cuenta los caracteres escritos en un textarea con Javascript
- Cómo comprimir ficheros javascript fácilmente

- Versión imprimible de este documento

- Enviar por e-mail este documento