Con Javascript podemos validar los campos de un formulario que un usuario envia en una pagina web antes de que sean enviados y validados en el...
Crear un reloj con Javascript
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.
Quizás te interese ...
Principalmente, la mayor parte de las aplicaciones mas complejas, deben acceder al valor de alguna variable, para ello dedemos escribir dentro...
Con este script muy sencillo podemos conocer los datos del navegador y mostrarlos en pantalla, dentro de etiquetas script escribimos un...
Script para obtener los datos de la pantalla del usuario y mostrarlos en pantalla, dentro de etiquetas <script> escribimos un...
Valoraciones
Sé el primero en valorar