Cita aleatoria (Random Quote) con Javascript

Cita aleatoria (Random Quote) con Javascript

...

Seguro ya te diste cuenta que en la línea superior se muestra un mensaje de texto (cita) con color verde.

Si actualizas la página es muy probable que veas que el texto cambiará… y si vuelves a hacerlo cambiará nuevamente.

Este código te puede servir si deseas como dice el título, presentar una cita aleatoria para cada vez que ingrese un visitante a tu sitio.

El código es el siguiente:

<div id="randomquote" style="color: rgb(0 , 255 , 0); font-family: arial; font-size: 20px; font-style: italic; font-weight: bold; text-align: left; text-decoration: none;"> </div> <script type="text/javascript"> var quoteCount = 0; var citas = new Array (); citas[0] = "MIBLOGGER - Aleatorio 1"; citas[1] = "Aleatorio 2 - MiBlogger"; citas[2] = "ElectroSYSTEM - Aleatorio 3 - Actualiza tu página"; citas[3] = "Aleatorio 4 - E l e c t r o S Y S T E M"; citas[4] = "ALEATORIO 5 - Eres el mejor ... :)"; citas[5] = "Aleatorio 6 - MiBlogger - Actualiza tu página"; citas[6] = "ElectroSYSTEM - Aleatorio 7 - Cita aleatoria"; citas[7] = "Aleatorio 8 - :) - Estás aquí porque no estás en otro lado"; citas[8] = "ALEATORIO 9 - Eres lo máximo"; citas[9] = "Aleatorio 10 - ElectroSYSTEM/MiBlogger - Cita aleatoria (Random Quote) con Javascript"; for (i=0; i<citas.length; i++) { if (citas[i] == "") break; quoteCount++; } var randomquote = document.getElementById('randomquote'); randomquote.innerHTML = citas[Math.floor(quoteCount * Math.random())]; </script>

No obstante puedes cambiar la fuente en su color, familia, tamaño y estilo, modificando el código en la primera línea:
<div id="randomquote" style="color: rgb(0 , 255 , 0); font-family: "arial"; font-size: 20px; font-style: italic; font-weight: bold; text-align: left; text-decoration: none;">
</div>


Después lo que tienes que hacer es cambiar los mensajes que se muestran en cada cita.

citas[0] = "ElectroSYSTEM - Aleatorio 1";
citas[1] = "Aleatorio 2 - ElectroSYSTEM";
citas[2] = "ElectroSYSTEM - Aleatorio 3 - Actualiza tu página";
citas[3] = "Aleatorio 4 - E l e c t r o S Y S T E M";
citas[4] = "ALEATORIO 5 - Eres el mejor ... :)";
citas[5] = "Aleatorio 6 - ElectroSYSTEM - Actualiza tu página";
citas[6] = "ElectroSYSTEM - Aleatorio 7 - Cita aleatoria";
citas[7] = "Aleatorio 8 -  :) - Estás aquí porque no estás en otro lado";
citas[8] = "ALEATORIO 9 - Eres lo máximo";
citas[9] = "Aleatorio 10 - ElectroSYSTEM - Cita aleatoria (Random Quote) con Javascript";


Puedes además añadirle más citas si así lo deseas, no olvidando escribir el número correspondiente según la secuencia.

citas[#] = "Tu mensaje…";


Te dejo unas ideas de citas para presentar: frases celebres, mensajes motivadores, dichos, avisos de uso de sistema, tips.

Quizás te interese:
Texto parpadeante (Blinking Text) con Javascript
Letras saltantes (Jumping letters) con javascript