Reloj en Javascript

  • Por
  • 04 de octubre de 2001
  • Valoración:
  • 28 Comentarios
  • Scripts en Javascript
Aprendemos a crear un reloj sencillo mediante Javascript y le aplicamos algunas mejoras.
Vamos a ver un taller práctico sobre Javascript con el cual podremos incluir un reloj en nuestra página web. Es un sencillo script, que podremos colocar con tan sólo cortar y pegar, aunque procuraremos explicarlo un poco para los que estén en condiciones de entender Javascript.

Para empezar, vamos a ver el relojito que pretendemos crear:

Es un reloj muy sencillito de manera intencionada, para que podamos entender bien el ejercicio. Luego lo complicaremos un poco más para darle algo de vistosidad.

Construir el formulario

Empezamos por colocar el campo de texto donde se mostrará el reloj. Debemos colocar un pequeño formulario donde tan solo tendremos un campo de texto.

<form name="form_reloj">
<input type="text" name="reloj" size="10">
</form>


No debería haber ningún problema en estas líneas de HTML. Sólo colocamos las etiquetas de inicio y final del formulario y dentro un campo de texto. Tanto al formulario como al campo de texto les asignamos un nombre para luego accederlos por ese nombre mediante Javascript.

Función para actualizar el valor del reloj

Tenemos que construir una función que recoja la hora del sistema y la muestre en el campo de texto.

Para tomar la hora vamos a hacer uso del objeto Date de Javascript.

momentoActual = new Date()

Si creamos una nueva instancia del objeto Date sin pasarle parámetros se inicializa a la fecha y hora actuales.

Luego tenemos que obtener de esa instancia de Date lo que nos interesa, que es la hora, los minutos y segundos. Esto lo hacemos utilizando los correspondientes métodos del objeto Date.

hora = momentoActual.getHours()
minuto = momentoActual.getMinutes()
segundo = momentoActual.getSeconds()


Ahora combinamos los resultados para construir la hora con el formato que deseamos.

horaImprimible = hora + " : " + minuto + " : " + segundo

Por último colocamos en el campo de texto del formulario el valor actual de la hora.

document.form_reloj.reloj.value = horaImprimible

Por ahora la función queda de esta manera:

function mueveReloj(){
    momentoActual = new Date()
    hora = momentoActual.getHours()
    minuto = momentoActual.getMinutes()
    segundo = momentoActual.getSeconds()

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible
}


La función debe llamarse a si misma

Con estas líneas de código obtenemos la hora y la actualizamos en su campo de texto, pero no está hecho todo, necesitamos que esa función se llame constantemente y cada segundo para que actualice el valor de nuestro campo de texto constantemente también.

Para ello, lo mejor es que la función se encargue también de llamarse a si misma al cabo de un segundo, así volverá a hacer todo el proceso de obtención y actualización de la hora y por último se llamará a si misma al cabo de un segundo. Este proceso se repetirá por siempre hasta que nos salgamos de la página.

La línea de código para llamarse a si misma, que colocaremos en la última línea de la función es la siguiente:

setTimeout("mueveReloj()",1000)

La función setTimeout sirve para hacer el retardo antes de ejecutar la sentencia. La sentencia es una simple llamada a la función y el retardo es de 1000 milisegundos (un segundo).

Poner en marcha el reloj

Finalmente necesitamos poner el reloj en marcha. Esto lo podemos hacer una vez acabada la carga de la página con el manejador de eventos onload, que se coloca en el <body>.

<body onload="mueveReloj()">

Esto quiere decir que cuando se termine de cargar la página se llame a la función mueveReloj(), que se encargará de mover el reloj y llamarse a si misma para hacer el proceso de manera continuada.

Código entero

El código de la página queda de esta manera:

<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
function mueveReloj(){
    momentoActual = new Date()
    hora = momentoActual.getHours()
    minuto = momentoActual.getMinutes()
    segundo = momentoActual.getSeconds()

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible

    setTimeout("mueveReloj()",1000)
}
</script>
</head>

<body onload="mueveReloj()">

Vemos aquí el reloj funcionando...

<form name="form_reloj">
<input type="text" name="reloj" size="10">
</form>

</body>
</html>


Añadidos al reloj

Podemos hacer muchas cosas para mejorar aspectos de este reloj. Por ejemplo darle un poco de estilo al campo de texto o hacer que nadie se pueda posar encima del campo de texto para actualizar manualmente el valor de la hora. Vamos a ver alguna cosilla.

Estilo al reloj

Con hojas de estilo podemos cambiar la apariencia del reloj para hacerlo un poco más especial. Este es un ejemplo de lo que se podría poner.

<input type="text" name="reloj" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;">

Evitar que accedan al campo de texto

Así nadie podrá modificar el texto del reloj manualmente. Lo conseguimos con Javascript. El manejador de eventos onfocus se activa cuando el campo de texto adquiere el foco de la aplicación. En ese momento nosotros sacaremos el foco de la aplicación con el método blur(). El botón quedaría así:

<input type="text" name="reloj" size="10" onfocus="window.document.form_reloj.reloj.blur()">

Hacer que siempre tengamos dos digitos en la hora minutos y segundos.

Para conseguir que la hora tenga siempre un formato hh : mm : ss debemos jugar un poco con los valores de tiempo como si fueran strings. Para ello lo primero que tendremos que hacer es construir un string a partir del valor (hora, minuto o segundo) que queramos formatear. Luego observaremos ese string para saber si tenemos que añadirle un dígito al valor.

Veamos cómo obtenemos el string a partir del número de segundos obtenido. Lo hacemos para los segundos, la hora y los minutos serán realizados de manera similar.

str_segundo = new String (segundo)

Seguidamente observamos si tenemos un solo carácter en el string, porque si es así le tenemos que concatenar un cero ("0") al principio.

if (str_segundo.length == 1)
segundo = "0" + segundo


Todo junto

Veamos otra vez nuestro ejemplo en una sola pieza para ver cómo quedan todas estas mejoras.

<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
function mueveReloj(){
    momentoActual = new Date()
    hora = momentoActual.getHours()
    minuto = momentoActual.getMinutes()
    segundo = momentoActual.getSeconds()

    str_segundo = new String (segundo)
    if (str_segundo.length == 1)
       segundo = "0" + segundo

    str_minuto = new String (minuto)
    if (str_minuto.length == 1)
       minuto = "0" + minuto

    str_hora = new String (hora)
    if (str_hora.length == 1)
       hora = "0" + hora

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible

    setTimeout("mueveReloj()",1000)
}
</script>
</head>

<body onload="mueveReloj()">

Vemos aquí el reloj funcionando...

<form name="form_reloj">
<input type="text" name="reloj" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;" onfocus="window.document.form_reloj.reloj.blur()">
</form>

</body>
</html>


Este segundo reloj lo podemos ver a continuación.

Si lo deseamos podemos abrir una página web para visualizar:

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

DAN

01/3/2004
Sólo para evitar algo de código en el script del reloj...
<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
function mueveReloj(){
    momentoActual = new Date();
    hora = momentoActual.getHours();
    minuto = momentoActual.getMinutes();
    segundo = momentoActual.getSeconds();

    str_segundo = new String (segundo)
    if (str_segundo.length == 1)
       segundo = "0" + segundo;

    str_minuto = new String (minuto)
    if (str_minuto.length == 1)
       minuto = "0" + minuto;

    str_hora = new String (hora)
    if (str_hora.length == 1)
       hora = "0" + hora;

    horaImprimible = hora + ":" + minuto + ":" + segundo;

    cl.innerHTML = horaImprimible;

    setTimeout("mueveReloj()",1000);
}
</script>
</head>

<body onload="mueveReloj()">

<table width="98" border="2" cellpadding="2" cellspacing="2" bordercolor="#FFFFFF" bgcolor="#000000">
    <tr>
       <th width="86" scope="col"><font id="cl" color="#ffffff"><strong>0</strong></font></th>
    </tr>
</table>
</body>
</html>

dan

03/3/2004
Este código aunque más largo nos evita la hora militar osea 13, 14, 20, etc... y en ves de eso nos muestra lo referente a el horario 01:00:00 a.m o bien 01:00:00 p.m. dependiendo en que momento este, podemos hacer tambien mensajes personalizados dependiendo de los horarios mayor o igual a las 12 y menor a las 7 //buenas tarde, mayor o igual a las 7 de la noche// buenas noche de lo contrario buenos días

<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
var m="A.M.";
function mueveReloj(){
    momentoActual = new Date();
    hora = momentoActual.getHours();
    minuto = momentoActual.getMinutes();
    segundo = momentoActual.getSeconds();

if(hora==12)
{
    m="M.D.";
}
if(hora==13)
{
    hora="0"+1;
    m="P.M.";
}
if(hora==14)
{
    hora="0"+2;
    m="P.M.";
}
if(hora==15)
{
    hora="0"+3;
    m="P.M.";
}
if(hora==16)
{
    hora="0"+4;
    m="P.M.";
}
if(hora==17)
{
    hora="0"+5;
    m="P.M.";
}
if(hora==18)
{
    hora="0"+6;
    m="P.M.";
}
if(hora==19)
{
    hora="0"+7;
    m="P.M.";
}
if(hora==20)
{
    hora="0"+8;
    m="P.M.";
}
if(hora==21)
{
    hora="0"+9;
    M="P.M.";
}
if(hora==22)
{
    hora=10;
    m="P.M.";
}
if(hora==23)
{
    hora=11;
    m="P.M.";
}
if((hora==0)||(hora==24))
{
    hora=12;
    m="M.N";
}

    str_segundo = new String (segundo)
    if (str_segundo.length == 1)
       segundo = "0" + segundo;

    str_minuto = new String (minuto)
    if (str_minuto.length == 1)
       minuto = "0" + minuto;

    str_hora = new String (hora)
    if (str_hora.length == 1)
       hora = "0" + hora;

    horaImprimible = hora + ":" + minuto + ":" + segundo+" "+m;

    cl.innerHTML = horaImprimible;//cl=clock=reloj

    setTimeout("mueveReloj()",1000);
}
</script>
</head>

<body onload="mueveReloj()">

<table width="128" border="2" cellpadding="2" cellspacing="2" bordercolor="#FFFFFF" bgcolor="#000000">
    <tr>
    <th width="114" scope="col"><font id="cl" color="#ffffff"><strong>0</strong></font></th>
    </tr>
</table>
</body>
</html>

Jaevi

08/8/2005
Me hacía falta un reloj en javascript. Y por no buscar alguno que ya tubiera yo ya hecho... pues lo busqué y encontré el artículo de esta página.

Cierto que aparece el problema de que cuando los minutos/segundos (la hora da igual, creo yo) son de un sólo dígito habría que poner un 0 delante.

Termine de leer el articulo (con la primera parte me bastaba y ya solucionaria yo lo del primer dígito) y vi la solución que se aportaba:

str_segundo = new String (segundo)
if (str_segundo.length == 1)
segundo = "0" + segundo

y otro igual para los minutos.

Realmente funciona pero... en vez de crear una nueva variable tipo string y medirla... no sería mas facil algo asi:

if (segundo < 10)
segundo = "0" + segundo;

si es menor de 10, pues le pones un 0 delante.

Desde mi punto de vista es mas fácil, no hay que crear mas variables y se ve más facil

Miguel Angel

09/8/2005
A raíz del comentario anterior, en el que propone otro código más sencillo para poner un -0- si los minutos o las horas son menores que 10.

Ese código que propones está bien y entiendo que te parezca más sencillo... A mi también puede parecérmelo.

El que había utilizado yo en el artículo es más "académico" (mas correcto desde el punto de vista de un programador) porque utiliza una variable tipo string para concatenar otro string.

Por contra, tu código, concatena un string con un número. Esto en javascript es perfectamente correcto, porque internamente hace una conversión del número en un string para concatenarlo con otro string. En otros lenguajes de programación no se pueden concatenar números con strings, sólo permiten concatenar strings entre si y no te hacen automáticamente las conversiones necesarias para hacer la concatenación.

ElectroniX

31/7/2006
Sobre el comentario sobre como poner la hora del servidor en vez de la del cliente:

Yo no se mucho de javaScript, pero he encontrado que dreamweaver al abrir el tag <script> me figura una opcion runat. al colocarla me dice que puedo colocar server. podrìa ser eso?
es decir que el codigo quedaría:

<script ....... runat="server">

por otro lado, puedo aonsejar usar php, ya que este codigo se ejecuta directamente en el server. a su vez puedes introducir las variables usadas en php directamente sobre el script java, de esta manera generarías no solo un script y una pagina dinamica, sino todo un script dinamico, cambiando por decirlo de alguna manera facil, las variables del mismo script.

por otra parte quiciera aconsejar para los menos expertos:
se pueden colocar los codigos en un archivo .js y luego importarlo en el html con el tag <script> por ej
<script src="blabla.js"........>
de esta manera se obtiene un codigo mas limpio en la web, facilitando la lectura, pero a la vez impidiendo que la gente lea directamente el codigo colocando "ver codigo de fuente" (Este no es un medio de seguridad muy alta, ya que si en la direccion del explorador colocal la ubicacion del archivo .js obtendran un download del archivo, y dicha ubicación si saldrá en el codigo html).

Me despido diciendo que cuenten conmigo para cualquier consulta

Mi mail y msn es : richardcristiang@gmail.com

Saludos a todos

Evián Suárez

29/9/2006
Para no ver la hora militar y no insertar tantos "if" como en los comentarios pasados creo que con esta sentencia ya se resuelve ese problema:

if(hora>=12 && hora<=23)
m="P.M";
else
m="A.M";

Yoel Asuan Web Developer

08/11/2006
Excelentes sugerencias para mejorar el reloj, las tomaré en cuenta, me gustaria también algún código para obtener la fecha correcta no jalandola de la fecha de sistema, o que se pueda empezar a contar de una fecha dada para que así la fecha siempre sea la correcta independientemente de los reajustes de hora que se puedan hacer.

Alien

22/2/2007
Hola a todos, este código para reloj me ha parecido algo bueno como para insertarlo en mi Web, solo que jugando un poco con las líneas del fuente he podido destacar algo en cuanto a presentación pero en si el código podría ser mejorado y evitando un tanto las complicaciones en cuanto a los Strings. A continuación detallo el código del reloj con algunas modificaciones que especifican el día, mes y año…
A y por cierto una duda si alguien podría responderla se puede en algunos de los casos insertar dos códigos de tipo onload en el fuente de una página Web… Siendo que tuviera insertado el reloj y quisiera insertar un cronometro.
Contactos al milenuim_f@hotmail.com

CODIGO DEL RELOJ:

<htm>
<head>
</head>
<body>
<script language="JavaScript">
function Reloj(){
A = new Date()
dateText = ""
hora = A.getHours()
minuto = A.getMinutes()
segundo = A.getSeconds()

// Tomar el dia actual y convertirlo al espanol
dayValue = A.getDay()
if (dayValue == 0)
dateText += "Domingo"
else if (dayValue == 1)
dateText += "Lunes"
else if (dayValue == 2)
dateText += "Martes"
else if (dayValue == 3)
dateText += "Miercoles"
else if (dayValue == 4)
dateText += "Jueves"
else if (dayValue == 5)
dateText += "Viernes"
else if (dayValue == 6)
dateText += "Sabado"

// tomar el mes actual y convertirlo a meses en espanol
monthValue = A.getMonth()
dateText += " "
if (monthValue == 0)
dateText += "Enero"
if (monthValue == 1)
dateText += "Febrero"
if (monthValue == 2)
dateText += "Marzo"
if (monthValue == 3)
dateText += "Abril"
if (monthValue == 4)
dateText += "Mayo"
if (monthValue == 5)
dateText += "Junio"
if (monthValue == 6)
dateText += "Julio"
if (monthValue == 7)
dateText += "Agosto"
if (monthValue == 8)
dateText += "Septiembre"
if (monthValue == 9)
dateText += "Octubre"
if (monthValue == 10)
dateText += "Noviembre"
if (monthValue == 11)
dateText += "Diciembre"

// Para visualizar el ano, si es antes del 2000
if (A.getYear() < 2000)
dateText += " " + A.getDate() + ", " + (1900 + A.getYear())
else
dateText += " " + A.getDate() + ", " + (A.getYear())

// Para visualizar la forma como se mira el tiempo
if (segundo < 10)
segundo = "0" + segundo;

if (minuto < 10)
minuto = "0" + minuto;

if (hora < 10)
hora = "0" + hora;

if (hora < 12)
{
greeting="BUENOS DIAS!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " AM "
}
else if(hora == 12)
{
greeting="BUENAS TARDES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}
else if(hora < 18)
{
greeting="BUENAS TARDES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}
else
{
greeting="BUENAS NOCHES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}

horaImprimible = timeText + "Bienvenidos a DesarrolloWeb.com " + dateText

document.form_reloj.reloj.value = horaImprimible

setTimeout("Reloj()",1000)

}

</script>

<p align=center>
<body onload="Reloj()">

<form name="form_reloj">
<input type="text" name="reloj" size="85" style="background-color : Green; ; color : Lime; font-family : Arial; font-size : 10pt; text-align : center;">
</form>
</body>
</htm>

Christopher

01/12/2008
Los meses los puedes hacer con un Array igual que los dias no amplies el codigo.

dia= new Array("Domingo",...)

momg

22/4/2009
Ayuda con Reloj javascript
hola quisiera que me pudieran ayudar a hacer un reloj para mi pagina pero quisiera que el relog fuera echo a una hora espesifica y que tuviera un extensor para poder poner multisonas asi le podrian pikar y se pudiera cambiar la sona algo asi

APR-21 05:05:55PM EDT Time GMT(-4)

donde mi cliente entre y en mi pagina este mi hora APR-21 05:05:55PM y lo de al lado mi cliente le pueda picar en EDT Time GMT(-4) y ayi salgoa la obcion de su zona para poner el relog a su hora

se que se puede ya lo e visto en dos paginas pero nomas no logro hacer el codigo o consegirlo si algien de ustede save me podria ayudar muchisimas gracias :D

Alejandra

29/4/2009
GRACIAS
Mil gracias por el dato..........

Franco

08/7/2009
Reloj
Hola, necesito ponerle controles a este reloj para cambiar la hora y lo minutos para escoger la hora segun lo necesite para hacer un selec entre hora_inicio y hora_fin

oscar

21/9/2009
poner reloj
andale

Ana

09/10/2009
Excelente
Hola Miguel, mujchas gracias por relajar nuestro trabajom esta genial
tu opcion integrar el reloj en mi sitio

besossssssssssssssss

silvia

30/10/2009
gracias
de verdad me ayudo mucho ya que stoy realizando una pagina web en el html ; gel...

Alejandro

04/11/2009
Reloj latinoamericano
¿Qué código debo usar para poner un reloj latinoamericano?
soy novato en javascript

Necesito un reloj que muestre la hora de México/Cuba/Guatemala/El Salvador/Honduras/Nicaragua/Colombia/Venezuela/Ecuador/Bolivia/Argentina/Chile/Uruguay/Paraguay/Brazil simultáneamente.

Que el usuario no sólo vea suhora local sino que vea la hora continental, es decir, los diferentes horarios a la vez.

Gracias.

erick

11/11/2009
como colocar un reloj en una pagina wep
me parecio muy buena la manera tan practica y cencilla de mostrar a los usuarios el modo de colocar un reloj a su pagina web ,los felicito por su paginap

Maurici0

24/1/2010
Comentario...
Respecto al de la persona de arriba, quizas como estetica, los meses y dias los meteria en un arreglo.. y ya despues mandaria a llamarlo asi:

var dia= new ("","Lunes", "Martes", "Miercoles","Jueves","Viernes");
var mes= new ("", "Enero", "Febrero",....,"Diciembre");

dateText+=dia[dayValue];
dateText+=mes[monthValue];

Y con respecto a la instruccion de BUENAS TARDES.

.
.
if(hora >= 12 || hora < 18)
{
greeting="BUENAS TARDES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}
.
.


Y asi ya lopondria en un solo if y no en dos como lo tenias..solo es una opinion mas... =)

Sergio

01/3/2010
AYUDA
soy nuevo en lo de programar y la verdad es que estoy en 0000 y necesito que pues alguien me ayude xq nos dieron este codigo
public class Hora {

byte minutos,segundos,hora;
void setMinutos(byte m){
minutos=m;
}

void setSegundos(byte s){
segundos=s;
}
void setHora(byte h){
hora=h;
}

byte getSegundos(){
return segundos;

}
byte getHora(){
return hora ;

}
byte getMinutos(){
return minutos;

}
String horaMilitar(){
String salida=""+hora+minutos;
return salida;
}

String hora24(){

return ""+hora+":"+minutos+":"+segundos;
}

String horaEstandar(){
String hra="";
if (hora==12) hra=hora+":"+minutos+":"+segundos+"pm";
else
if (hora>12) hra=hra+(hora-12)+":"+minutos+":"+segundos+"pm";
else
hra=hora+":"+minutos+":"+segundos+"am";
return hra;

}
}

-------------------------------------

import javax.swing.JOptionPane;
public class Aplicacion {

//___________________________________________
static String lee(String txt){
return JOptionPane.showInputDialog(txt);


}
//___________________________________________
static Hora iniciarHora(){
Hora reloj=new Hora();
byte h1=100,m1=100,s1=100;

while((h1<0)||(h1>24)){
h1=Byte.parseByte(lee("Dame la hora en formato 24 "));

}

reloj.setHora(h1);
do{

m1=Byte.parseByte(lee("Dame los minutos "));
}while((m1<0)||(m1>59));
reloj.setMinutos(m1);
do{

s1=Byte.parseByte(lee("Dame los segundos"));
}while((s1<0)||(s1>59));
reloj.setSegundos(s1);
return reloj;
}
//___________________________________________
static void mostrarHora(){
Hora reloj=iniciarHora();
String menu="Hora del dia en formato 1.- Militar 2.- Estandar 3.- 24 horas 4.-Salir";
byte op;
do{

op=Byte.parseByte(lee(menu));
switch(op){
case 1:String hm=reloj.horaMilitar();
JOptionPane.showMessageDialog(null,"La hora en formato militar es "+hm);break;
case 2: JOptionPane.showMessageDialog(null,"La hora en formato estandar es "+reloj.horaEstandar());break;
case 3: JOptionPane.showMessageDialog(null,"La hora en formato 24 es "+reloj.hora24());break;
case 4: JOptionPane.showMessageDialog(null,"Adios");break;
default : JOptionPane.showMessageDialog(null,"Error");
}

}while(op!=4);
}
//___________________________________________

public static void main(String[] args) {
Aplicacion.mostrarHora();
}
}

y basandonos en eso hay que crear un cronometro pero la verdad no se como ponerlo o como crearlo, ojala alguien me pueda ayudar xq la verdad estoy bn desesperado, x favor ayudenme T_T

Yojuk

24/4/2010
duda
Hola a todos!!, yo se que este articulo es muy viejo, y no quisiera volverlo a reabrir, pero por mas que busco no encuentro, he estado buscando la forma de manipular la hora, es decir:
son las 12:04:02 y yo quiero agarrar la hora (12) para compararla con otro valor asi como los minutos.
Ahora mi pregunta es: hay alguna forma de hacer eso?

Saludos!, y gracias de antemano.

lotsonic

28/4/2010
Reloj sin form
Una manera más sencilla y sin el cuadro de texto es la siguiente:

En <head> ponen:

<script type="text/javascript">
function hora(){
var fecha = new Date()
var hora = fecha.getHours()
var minuto = fecha.getMinutes()
var segundo = fecha.getSeconds()
if(hora>=12 && hora<=23)
m="P.M"
else
m="A.M"
if (hora < 10) {hora = "0" + hora}
if (minuto < 10) {minuto = "0" + minuto}
if (segundo < 10) {segundo = "0" + segundo}
var nowhora = "[ " + hora + ":" + minuto + ":" + segundo + " - " + m + " ]"
document.getElementById('hora').firstChild.nodeValue = nowhora
tiempo = setTimeout('hora()',1000)
}
</script>

Combian <body> por <body onload="hora()">

Y donde quieran que aparesca la hora, ponen esto:

<span id="hora">000000</span>

Dennyse Pariona Lunasco

12/7/2010
Es de mucha ayuda
Gracias por el codgio para hacer la hora con am y pm en java script me fue de mucha utilidad.

mkiii2003

22/2/2011
Ayuda con el reloj
Hola Amigo suna pregunta, de que forma podria hacer para que en la web aparezca pero mi hora local, en otras palabras, mi web es de turismo y l aven en varias partes del mundo y por la diferencia de horario nos hacen llamadas por la madrugada (hora local) yo quisiera mostrar en mi web a la gente la hora local de mi ciudad para que sepan en que momento hablarnos y sobre todo encontrarnos. Mil gracias por su tiempo.Saludos. Jaime

Pandora

23/3/2011
htlm de reloj
Me gustaria saber como pongo el reloj sobre un fondo de una imagen. No se donde debo de poner el htlm de la imagen en el codigo del reloj

keneth

31/8/2012
Me encanto el tutorial !!
Hola!! bueno agradecerte por el tutorial, me encanto mucho, esta muy bien explicado. Gracias por compartirlo!!
Saludos!!

Yeng Quispe

14/10/2012
Creo que este codigoes mas corto que todos... (partiendo del inicial)
function mueveReloj()
{
momentoActual = new Date()
hora = momentoActual.getHours()
if (hora>12){
hora=hora-12;
}
minuto = momentoActual.getMinutes()
segundo = momentoActual.getSeconds()
if (segundo<10) {
segundo="0"+segundo;}
horaImprimible = hora + " : " + minuto + " : " + segundo
document.form_reloj.reloj.value = horaImprimible
setTimeout("mueveReloj()",1000)
}

Ruisu

19/12/2013
Muy Bueno
El día de hoy sigue ayudando mucho esta información felicidades.

Gilberto Reyes Barrera.

29/12/2013
Reloj en html
Excelente codigo, me ha sido de gran ayuda para entender conceptos basicos de javaScript, te felicito y te agradezco este tipo de ayuda que nos das a mucha gente.

Saludos, y una larga vida, llena de exitos.

Gilberto

Compartir