19 de julio de 2012

Mostrar reloj en página web

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

Deja una Respuesta