Crear un reloj con Javascript

1 de /abril04 de /2014
4m 40s
javascript
0 comentarios
11752

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 pantalla

Para 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

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies