Páginas

▼
▼

martes, 20 de junio de 2017

Reloj programado en JavaScript

Vamos a crear un reloj, esto es una aplicación que nos da la hora del sistema y se actualiza cada segundo para darnos de forma continua el valor de la hora, minutos y segundos. Así conseguiremos un reloj en pantalla.

He consultado la página siguiente: https://desarrolloweb.com/articulos/549.php


El código HTML es el siguiente.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>reloj en javascript</title>  
  </head>  
  <body onload="mueveReloj()">   
 <p>Un reloj programado en JavaScript</p>  
 <form name="form_reloj">  
 <input type="text" name="reloj" size="12" style="background-color : blue; color : #EFFBFB; font-family: Arial, Helvetica, Verdana, sans-serif; font-size : 38pt; text-align : center;" onfocus="window.document.form_reloj.reloj.blur()">  
 </form>   
   <script src="reloj.js"></script>  
  </body>  
 </html>

En el código HTML lo que hace blur es quitar el foco.


El código JavaScript es el siguiente.

 function mueveReloj()  
 {   
    momentoActual = new Date();   
    hora = momentoActual.getHours();   
    minuto = momentoActual.getMinutes();   
    segundo = momentoActual.getSeconds();   
    str_segundo = new String (segundo); //convierte la variable segundo en una cadena  
    if (str_segundo.length == 1)    //si la longitud de la cadena es 1  
   segundo = "0" + segundo;   //añade un cero a la izquierda  
    str_minuto = new String (minuto);   
    if (str_minuto.length == 1)    //en la estructura if no usamos llaves { }  
   minuto = "0" + minuto;  
    str_hora = new String (hora);   
    if (str_hora.length == 1)   
   hora = "0" + hora;   
    horaImprimible = hora + " : " + minuto + " : " + segundo;  
    document.form_reloj.reloj.value = horaImprimible;   
    setTimeout("mueveReloj()",1000)  
 }

Puedes ver el reloj funcionando en la siguiente página. Te da la hora de tu sistema.

en

No hay comentarios:

Publicar un comentario