Alternar multiples CSS utilizando JavaScript

Es frecuente el uso de PHP para alternar aleatoriamente algunos elementos de los sitios web, ya sea imágenes, hojas de estilo o lo que sea para darle un aire de dimamismo a cada sitio, pero... ¿Qué hago si no cuento con un servidor que soporte PHP? Bueno, podemos hacerlo vía JavaScript y a continuación mostraré un ejemplo para alternar multiples hojas de estilo (CSS).

Antes que nada, los diferentes archivos CSS deben guardarse con los nombres 0.css, 1.css, 2.css, etc. y deben quedar en un directorio llamado css para que podamos hacer la llamada a través de una función que genere números aleatorios.

Para la generación de un número aleatorio utilizaremos la función JavaScript math.random() que nos devuelve un numero entre cero y uno, con muchos decimales, asi que antes de usarla habrá que multiplicarla por un entero y redondear el resultado usando Math.round();. El número entero nos indicará el alcance del número que será generado. Ejemplo: Si utilizaremos el número 9 entonces nos devolverá un entero entre 0 y 8, ya que la función Math.floor redondea hacia abajo. Math.floor(Math.random()*9).

Ahora para sintetizar el proceso vamos a construir una función:

 function randomCSS(numero){
       valor = Math.random() * numero;
       valor = Math.floor(valor);
 	  css = "<link rel=\"stylesheet\" href=\"css/".concat(valor).concat(".css\" type=\"text/css\" />");
       return css
 }

Finalmente lo implementamos dentro del elemento <HEAD> del documento HTML de la siguiente manera, donde el número 10 indica que tengo hasta el archivo 9.css.

<script language="JavaScript" type="text/javascript">document.write(randomCSS(10))</script>

Ahora, si los estilos son muy diferentes entre uno y otro estaremos frente a un problema cuando el usuario navegue entre página y página, parecerá como que visitamos sitios distintos y probocará cierta confusión. Para solucionar este problema podemos guardar la variable valor en una cookie de la siguiente manera:

 function randomCSS(numero) {
 	 cssCookie=getCookie('cssCookie');
 	 if (cssCookie!=null) {
 	  css = "<link rel=\"stylesheet\" href=\"css/".concat(cssCookie).concat(".css\" type=\"text/css\" />");
 	 } else {
 	  valor = Math.random() * numero;
 	  valor = Math.floor(valor);
 	  setCookie('cssCookie',valor,365)
 	  css = "<link rel=\"stylesheet\" href=\"css/".concat(valor).concat(".css\" type=\"text/css\" />");
 	 }
 	 return css
 }

Las funciones setCookie() y getCookie() estan por aca.

El resultado es algo como esto y si quieres puedes descargar el sitio desde el vínculo de más abajo.

Si aun no te cambias a Mozilla Firefox y pruebas este script en Internet Explorer, no te sorprendas si te arroja un mensaje de seguridad ya que sucede cuando lo haces funcionar de manera local.

Adjunto	Tamaño
CSS_y_JavaScript.zip	2.6 KB

Acerca de...

Alternar multiples CSS utilizando JavaScript

Comentarios

Buena!!!

Enviar un comentario nuevo