Foto: Herbert Spencer
Dado que en mi anterior post han surgido un puñado de buenas citas, hoy voy a contar cómo hacer un script para generar una cada vez que se recargue nuestro blog. De esta forma siempre sorprenderéis a los visitantes con una frase diferente.
Para ello basta con copiar el siguiente código en el lugar donde queráis que aparezca la cita (yo, por ejemplo, la tengo en la cabecera, inmediatamente debajo de mi título):
<script language=»JavaScript»>
citas = new Array(4)
citas[0] = «Eres dueño de tus silencios y esclavo de tus palabras – Proverbio Árabe»
citas[1] = «Nuestro conocimiento es necesariamente finito, mientras que nuestra ignorancia es necesariamente infinita – Karl Raimund Popper»
citas[2] = «El silencio es el elemento en el cual se forman las más grandes cosas – Carlyle»
citas[3] = «A los silenciosos no se les puede quitar la palabra – Stanislaw JERZY LEC»aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])</script>
El funcionamiento es sencillo. Tenemos una colección de frases metidas en un array. Para los no informáticos, un array es algo así como un armario con cajones numerados del 0 al número de elementos menos 1. Es decir, si tenemos 4 citas, las metemos en los cajones 0, 1, 2 y 3.
Luego generamos un número aleatorio con la función random() para decidir qué cajón abrir. De esta forma, cada vez que alguien entre en nuestro blog, se generará un número diferente y abriremos por tanto un cajón diferente.
Si no sabéis citas o no os acordáis de alguna, existe una rama de la fundación Wikimedia denominada Wikiquote que recopila un gran número de frases, proverbios, dichos, …
Muy interesante!!!
bsos
Un par de preguntillas…
Justo detrás de Array(4); ese número se ha de cambiar por el número de cajas que contenga el array??
Y la otra, para dar formato a las citas, ¿Cómo se hace?
Un saludo
Que código tan poco accesible…. yo pooooor fastidiar un poco….
Tunea tu blog by Lore 🙂
Interesante código.
Quizá:
var citas = new Array();
citas.push(«cita1»);
citas.push(«cita2»);
citas.push(«cita3»);
…
//el resto igual
pueda ser mejor de cara a añadir, borrar etc, sin andar Array(número), y luego [numero]. No es la gran mejora del día… pero eso 🙂
HOla
un regalo!
El hombre es mortal por sus temores e inmortal por sus deseos (Pitágoras)
Algunos el nombre les suena a clase de geometría
Eso a mí
me suena
a ironía
SeNtiR El gOlpe
y EscuPir los dieNtes
sueltos
Que siemPre SalDrán unOs nuevos!
poNlos en tu cabeza
y
pide
un deseo.
Uno secreto.
El post me pareció tan interesante que lo voy a poner en práctica, además le envié el link a una amiga que tiene un blog donde ayuda a otros bloggers a mejorar sus espacios.
Gracias por el dato.
@burgales: el número de después de la palabra Array contiene el número de citas que vas a mostrar. No te entiendo con lo de dar formato a las citas 🙁
@anónimo: genial aporte!!. Muchas gracias, no conocía el método push
@david hormazabal: gracias por los regalitos 😉
ME refería, para que salgan en una especie de cuadrito, es decir, que se integre con el diseño del blog, que no símplemente sea un texto que se muestre. Que sea algo tipo lo que tienes tú, sale en una barra totalmente integrada en el blog, con una letra distinta etc…
Tendría que tocar algo del CSS o por HTML…??
Es que tengo poca idea de eso..soy casi novato.. jeje
Mola mazo!
Pero quiero más:
Quiero esto mismo pero con imágenes.
Es decir, que al refrescar salga una imagen aleatoria. ¿Pido demasiado?
Ya sabes, ofreces la mano y te cogen el brazo. 🙂
Este comentario responde tanto a la pregunta de burgales como a Ignazio.
La última sentencia del script (document.write(citas[aleatorio])) hace lo siguiente: document.write escribe en código html lo que le pases como argumento. Por tanto, si le pasas citas[aleatorio] escribe la cita que esté en esa posición pero si le pasas «<b>» + citas[aleatorio] + «</b>», pondrá la cita en negrita.
Por eso, si lo que queremos es una imagen aleatoria, tendremos que poner las urls de las distintas imágenes en el Array y luego poner la última sentencia así:
document.write(«<img src=»+imagen[aleatorio]+»/>»)
Gracias Lorena.
Me has dado una buena idea para mi web.
Y para darle un colorcito naranja como lo puedo hacer?
Y para centrarlo dentro del ancho de la web?
Un saludo, y gracias de antemano.
@burgales:
document.write(«<center><font color=#FF6600>» + citas[aleatorio] + «</font></center>»)
Muchas Gracias!!! Ya he conseguido que funcione!!!
hola, me parece interesante este script pero quesiera saber si tambien se puede hacer con imagenes o fotos, que cambien al momento de dar refresh a la pagina.
saludos
@harden: claro que se puede. Es tan sencillo como cambiar las frases por el código html que se usa para poner una imagen. Fácil y sencillo 😉
¿Funciona para WordPress.com?
Es que lo puesto en un cuadro de texto en la columna lateral y me aparece el código completo ¿Debo cambiarle algo?
@débora: ¿cuál es tu blog? Así puedo ver si lo has puesto bien. Entiendo que sí debería funcionarte porque en los cuadros de texto de wordpress te permite introducir javascript.
Gracias por responder.
La dirección del blog la enlazo a mi nombre. Al final de la columna derecha.
Yo lo escribo completo pero en la columna aparece cortado.
@Débora: he estado mirando y te faltan las etiquetas de inicio y de fin de script. ¿Las pones o te las quita wordpress?
Me las quita.
Tengo desactivada laopción «corregir de forma automática el HTML incorrectamente anidado»
¿No sé si tenga que ver?
Ya he probado también activando la casilla, y es el mismo resultado.
@Débora: efectivamente se come las etiquetas script. Mucho me temo que si no tienes acceso a la edición de tu plantilla no podrás usarlo con wordpress.com
Ok, no tenía mucha importancia, de todos modos gracias por tu tiempo 🙂
Hasta luego.