Es posible crear un reloj dentro de una página web; Esto lo podemos hacer utilizando JavaScript.
Lo primero que tenemos que hacer es utilizar un procesador de texto como bloc de notas o mejor aun, Dreamweaver.
- Creamos la estructura básica de la página html.
<html>
<head><title>Reloj en página web</title></head>
<body>
</body>
</html>
- Agregamos las etiquetas de JavaScript antes del cierre de la etiqueta “Head”
<script language="JavaScript">
</script>
- Dentro de las etiquetas de JavaScript escribiremos el siguiente codigo:
<script language="JavaScript">
<!-- Begin
day = new Date();
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
if (hrNow == 0) {
hora = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hora = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hora = 12;
} else if (hrNow >= 13) {
hora = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hora = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hora + ":" + min + ":" + secs + ap;
document.clock.timeInfo.value = time;
setTimeout('clock()', 1000);
}
document.write("<form name="clock">"+"<input type=text name="timeInfo" size=9 style='background: navy;border:1px solid gold;color:white;font-weight:bold;'></form>");
onError = null;
clock();
</script>
A continuación explicamos cada sección del código JavaScript:
function clock() { /*Creamos la función "clock"*/
dayTwo = new Date(); /*En una variable almacenamos la fecha actual*/
/*Sacamos la hora, los minutos y los segundor de la variable 'dayTwo' y almacenamos estos datos en variables*/
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
/*Verificamos la hora, si es la hora actual es AM o PM*/
if (hrNow == 0) {
hora = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hora = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hora = 12;
} else if (hrNow >= 13) {
hora = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hora = hrNow - 12;
}
/*Si los minutos son menores o iguales a 9, se agrega un cero(0) antes del número*/
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
/*Si los segundos son menores o iguales a 9, se agrega un cero (0) antes del número*/
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
/* Almacenamos en la variable 'time' la hora completa: hora,minuto,segundo y AM o PM */
time = hora + ":" + min + ":" + secs + ap;
document.clock.timeInfo.value = time; /*Asignamos el valor de la variable 'time' al cuadro de texto de con el nombre 'timeInfo' del formulario de nombre 'clock'.*/
setTimeout('clock()', 1000); /*Llamamos a la función 'clock()' en intervalo de 1 segundo*/
/*Creamos un formulario con el nombre de clock y un cuadro de texto (en donde se visualizara el reloj)*/
document.write("<form name="clock">"+"<input type=text name="timeInfo" size=9 style='background: navy;border:1px solid gold;color:white;font-weight:bold;'></form>");
onError = null;
clock(); /*Llamamnos a la función 'clock'*/
El codigo completo quedaría de la siguiente forma:
<html>
<head><title>Reloj en página web</title>
<script language="JavaScript">
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
if (hrNow == 0) {
hora = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hora = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hora = 12;
} else if (hrNow >= 13) {
hora = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hora = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hora + ":" + min + ":" + secs + ap;
document.clock.timeInfo.value = time;
setTimeout('clock()', 1000);
}
document.write("<form name="clock">"+"<input type=text name="timeInfo" size=9 style='background: navy;border:1px solid gold;color:white;font-weight:bold;'></form>");
onError = null;
clock();
</script>
</head>
<body bgcolor="black" ></body>
</html>
El resultado lo puedes ver AQUI
