Un reloj es una herramienta muy util en algunas aplicaciones web como formularios o aplicaciones, por ejemplo formularios que necesitan guardar
un registro con la hora y fecha de la acción de un usuario.
Para empezar creamos un documento HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Reloj con Javascript</title>
<meta charset="utf-8">
</head>
<body>
...
</body>
</html>A continuación, creamos un formulario con nombre “reloj_javascript” y una etiqueta <input> en su interior con nombre “reloj”:
<form name="reloj_javascript">
<input type="text" name="reloj">
</form>
</body>
</html>La funcion Javascript
function reloj() {
//Variables
horareal = new Date()
hora = horareal.getHours()
minuto = horareal.getMinutes()
segundo = horareal.getSeconds()
... Codigo para mostrar el reloj en pantalla
verhora = hora + " : " + minuto + " : " + segundo
document.reloj_javascript.reloj.value = verhora
setTimeout("reloj()",1000)
} La encerramos entre etiquetas <script></script> y la ponemos dentro del <head>
Muy importante, cargar la funcion en la etiqueta <body>(<body onload=”reloj()”>)
Con esta funcion, ya podemos ver el reloj funcionando en pantalla, pero queda muy lejos de ser un diseño de reloj normal, ahora vamos a agregar a la funcion reloj() unos bucles para comprobar si algun numero es de una sola cifra y si es así, la función añadirá un 0 delante del numero
Esto debemos pegarlo en la funcion, debajo de la linea del bloque anterior donde dice … “Codigo para mostrar el reloj en pantalla”
//Codigo para evitar que solo se vea un numero en los segundos
comprobarsegundo = new String (segundo)
if (comprobarsegundo.length == 1)
segundo = "0" + segundo
//Codigo para evitar que solo se vea un numero en los minutos
comprobarminuto = new String (minuto)
if (comprobarminuto.length == 1)
minuto = "0" + minuto
//Codigo para evitar que solo se vea un numero en las horas
comprobarhora = new String (hora)
if (comprobarhora.length == 1)
hora = "0" + hora
// Codigo para mostrar el reloj en pantallaPara mejorar el diseño del reloj usamos CSS
input {
border: none;
background-color:#333333;
color: #99CC00;
padding: 5px;
text-align: center;
}Ademas en el input podemos añadir este codigo para evitar que se obtenga el foco del input:
onfocus="window.document.reloj_javascript.reloj.blur()"El input se quedaria asi:
<input type="text" name="reloj" onfocus="window.document.reloj_javascript.reloj.blur()">El reloj
El codigo completo
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Reloj con Javascript</title>
<meta charset="utf-8">
<style>
input{
border: none;
}
</style>
<script>
function reloj() {
//Variables
horareal = new Date()
hora = horareal.getHours()
minuto = horareal.getMinutes()
segundo = horareal.getSeconds()
//Codigo para evitar que solo se vea un numero en los segundos
comprobarsegundo = new String (segundo)
if (comprobarsegundo.length == 1)
segundo = "0" + segundo
//Codigo para evitar que solo se vea un numero en los minutos
comprobarminuto = new String (minuto)
if (comprobarminuto.length == 1)
minuto = "0" + minuto
//Codigo para evitar que solo se vea un numero en las horas
comprobarhora = new String (hora)
if (comprobarhora.length == 1)
hora = "0" + hora
// Codigo para mostrar el reloj en pantalla
verhora = hora + " : " + minuto + " : " + segundo
document.reloj_javascript.reloj.value = verhora
setTimeout("reloj()",1000)
}
</script>
</head>
<body onload="reloj()">
<form name="reloj_javascript">
<input type="text" name="reloj" onfocus="window.document.reloj_javascript.reloj.blur()">
</form>
</body>
</html>Puedes ver y descargar el código de este archivo en mi cuenta de GitHub.
Valoraciones
Sé el primero en valorar