JMiur [E]

Aunque yo no uso reloj, mucha gente sí lo hace y les gusta tener uno en su blog. De hecho, es algo que casi todos hemos hecho alguna vez; buscar widgets en la red y probar a ver que pasa.

Hay muchos recursos de ese tipo, basta poner reloj + flash en cualquier buscador para que aparezcan decenas de sitios que ofrecen ese tipo de recursos:
Por lo general son pequeños objetos de Flash que basta copiar y pegar en un elemento HTML. Eventualmente, son un poco más complejos pero, es difícil que nos causen problemas.

Sin embargo, no es la única forma de colocar un reloj, también podemos hacerlo con un poco de JavaScript, CSS e imaginación. Claro, no serán espectaculares pero, tienen el sabor de lo artesanal y también son muy sencillos de implementar, sólo necesitamos tres cosas, el código del script, el lugar donde ubicarlo y el estilo gráfico que vamos a utilizar.

El script puede descargarse de este archivo de texto . Basta copiarlo y pegarlo en la plantilla, ya sea antes de </head> o en el elemento HTML que crearemos para contenerlo.

<script type="text/javascript">
// <![CDATA[
function ejecutarReloj(){
var digital = new Date(); // leemos la fecha y lahora
var hours=digital.getHours(); // guardamos la hora
var minutes=digital.getMinutes(); // guardamos los minutos
var seconds=digital.getSeconds(); // guardamos los segundos
var dn='am'; // texto AM o PM
if (hours>12) {
dn='pm'; // si pasan de las 12 será PM
hours=hours-12; // la hora de 0 a 12
}
if (hours==0) hours=12; // las 0 horas serán las  12
if (minutes<=9) minutes='0'+minutes; // formateamos los minutos con dos caracteres
if (seconds<=9) seconds='0'+seconds; // formateamos los segundos con dos caracteres
// creamos el código HTML del texto
crearReloj='<span class=relojHoras>' 
+ hours + '</span>:<span class=relojMinutos>' 
+ minutes + '</span>:<span class=relojSegundos>'
+ seconds + '</span><span class=relojAmPm>'
+ dn + '</span>';
// y lo escribimos en un DIV
document.getElementById('elReloj').innerHTML=crearReloj;
// lo actualizaremos cada segundo
setTimeout('ejecutarReloj()',1000);
}
// ]]>
</script>
Ahora necesitamos un bloque DIV donde ubicarlo y luego, llamar a la función del script así que, lo creamos donde queremos que se muestre:
<div id="elReloj"></div>
<script  type="text/javascript">ejecutarReloj();</script>


Lo que nos faltaría es darle forma, colocar las propiedades CSS y allí las posibilidades son muchísimas. Estas son las definiciones de las diferentes partes que lo componen:
<style type="text/css">
#elReloj {  /* es el bloque que contiene el reloj */
.......
}
.relojHoras { /* es el texto de las horas */
.......
}
.relojMinutos { /* es el texto de los minutos */
.......
}
.relojSegundos { /* es el texto de los segundos */
.......
}
.relojAmPm { /* es el texto AM/PM */
.......
}
</style>

15 comentarios:

Monoblock  

Tengo un blog y no se si me pasa solo a mi pero no me actualiza los Post y cuando creo uno nuevo no aparece pero si aparece en la seccion entradas.

Esto te pasa a vos o hay un problema con mi blog?

contestame please.

Responder
Botxero  

Llegué hace un tiempo desde el Blog de Gem@ y ya te has convertido en referencia, jeje. Te sigo de cerca porque es muy facil entenderte.

Gracias por tener esta maravilla de Blog. Te he enlazado, of course. `/;o)

Responder
los pensadores  

Hola!!
Hola... muy buen blog, tiene muchas herramientas interesantes.. una pregunta, como se hace para que solo se vea una parte de la entrada y algo q diga "leer más" o algo asi?
Esperamos verte en nuestro blog, es sobre distintos temas de la realidad, buscamos crear conciencia y ayudar a cambiar un poco este mundo en que vivimos... saludos!

Responder
Gem@  

¿Alguien tiene hora?

Responder
JMiur  

Monoblock: ya te he contestado en el comentario anterior.

Botxero: gracias por la visita y el enlace :)

los pensadores:
hay un post sobre ese tema AQUí

Gema@: 12:10AM :D

Responder
La Blogueria  

¿¿¿Para qué sirve un reloj en el blog???

Responder
Gem@  

Gracias J.Miur pero tardaste tanto que he llegado tarde :(

!Hola Botxero ¡

Vane está claro, como algo decorativo, una forma más de personalizar el blog . Ya sabes... dime que reloj tienes y te diré como eres :D

(Disculpa por este comentario J.Miur, me voy al mío que es donde debo contestar jejeje)

Responder
JMiur  

Gracias, Gem@; no hay problema :D

Para la pregunta de La Bloguería tengo dos respuestas. Una, es un poco tonta:

1. Un reloj en el blog sirve para saber qué hora es.

La otra respuesta, es más inteligente:

2. Un reloj en el blog sirve para ... no, la verdad, no tengo otra respuesta :)

Por cierto, son las 03:35 PM y es viernes ¡hurra! :D

Responder
La Blogueria  

Ya sé: sirve para ver la diferencia horaria entre el autor y yo, lectora. Por si esto sirviera de algo.

Vuestras respuestas son ciertamente sabias. Creo que el enigma queda, una vez más, resuelto.

Responder
JMiur  

En mi caso, saber esa diferencia sirve para saber que estoy viviendo un tiempo "usado". Estoy atrasado, muy atrasado :$

Responder
La Blogueria  

Y es que ahora que lo miro bien, es realmente bonito, el que has hecho tú... empiezo a sentir que quiero uno.

Responder
Anónimo  

Que no me digan que la hora existe !!!!!

Responder
tucart  

gracia me ayudastes mucho ,me encanto.

Responder
Lui'S Y  

Aunque la entrada es muy antigua!

Dejo otro ejemplo de porque el reloj.. Para los usuarios que llegas aquí como yo y leen los comentarios:

[+]Para quienes tienen algún blog sobre divisas (FOREX), la bolsa etc..
Donde es importante saber que hora es en Tokyo, Sydney, New York, Londres. No todo el mundo tiene un blog en plan "diario personal" o de chistes! ;)
Cualquier blog sobre wall street o noticias tendrá un reloj!
Yo tengo 5 en mi blog! Y estoy cada vez probando distintos tipos de reloj porque siento que lo pone super pesado!!
A ver como lo soluciono O.o


Un saludo.

Responder
Luis Hernan Gonzalez  

Hola, si por esa casualidad tienen el codigo html de los ": :" que separan hora/minutos/segundos se los agradeceria :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR