Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




El tiempo I

Reloj digital

Descripción del ejercicio

00 : 00 : 00

En este ejercicio crearemos un reloj digital que marque la hora los minutos y los segundos. Es un sencillo recuadro que podemos colocar en una página con cualquier otro contenido. El rejoj acabado lo vemos aquí a la derecha.

Javascript no tiene un reloj interno propio, sino que utiliza el del ordenador del usuario. La gran mayoría de los usuarios tienen actualizado y puesto en hora su reloj del ordenador, por lo que no debemos preocuparnos de ponerlo en hora, ni de la zona horaria de cada usuario. El unico problema estaría en que el usuario no tenga actualizado su reloj. En todo caso el usuario verá la misma hora que marca su ordenador o dispositivo.

Tal como vemos aquí, El reloj consiste en un pequeño recuadro que indica con números las horas, los minutos, y los segundos, y además debe estar en funcionamiento.


Planteamiento

En primer lugar crearemos mediante el código HTML y CSS el recuadro que será nuestro reloj, y dentro de él pondremos dos cifras para las horas, otras dos para los minutos y otras dos para los segundos; cada grupo de dos cifras van separadas: aquí pondremos el signo de dos puntos y unos espacios para separarlos.

Después mediante javascript buscamos la hora del reloj del ordenador, para ello javascript posee el objeto Date() que nos devuelve la fecha y hora actual. Mediante los diferentes métodos de este objeto extraemos la hora, los minutos y los segundos.

Con el objeto Date() obtenemos la hora del momento en el que éste es llamado, normalmente al cargarse la página o realizar un evento. Sin embargo si queremos que éste se actualice a cada segundo para poder tener un reloj en marcha, debemos utilizar un temporizador que nos llame a este objeto cada segundo. Veamos a continuación el desarrollo del ejercicio.


El código HTML y CSS

Para el código HTML simlemente creamos un elemento div donde escribimos el contenido de un reloj en hora cero.

  <div id="reloj">
   00 : 00 : 00
  </div>

El div id="reloj" el recuadro donde vamos a poner el reloj. Le hemos dado un valor inicial de 0 al reloj poder ver el aspecto final que va a tener.

Veamos ahora el código CSS que aplicamos a este recuadro. En la etiqueta CSS o en hoja de estilo escribimos el código CSS. En nuestro caso es el siguiente:

#reloj { width: 150px; height: 30px; padding: 5px 10px; border: 1px solid black; 
         font: bold 1.5em dotum, "lucida sans", arial; text-align: center;
         float: right; margin: 1em 3em 1em 1em; }

Aquí hemos puesto el código de manera que se adapte a esta misma página. Tu puedes cambiar las propiedades CSS para que se adapte al espacio y lugar en la página que quieras que ocupe, por supuesto también puedes cambiar fondos, tipos de margen, etc, para que tenga el aspecto que tu deseas.

00 : 00 : 00

Aquí a la derecha mostramos el aspecto que tiene el reloj en la página con el código que llevamos hasta el momento. Para poner el reloj en marcha tendremos que usar javascript.


Código javascript

El primer paso con javscript es hacer una función que nos devuelva la hora, minuto y segundo en el formato en el que vamos a incluirlo en el reloj. Para obtener la hora utilizaremos el objeto Date() y sus propiedades. Esta es la función que incluiremos dentro del código javascript:

function actual() {
         fecha=new Date(); //Actualizar fecha.
         hora=fecha.getHours(); //hora actual
         minuto=fecha.getMinutes(); //minuto actual
         segundo=fecha.getSeconds(); //segundo actual
         if (hora<10) { //dos cifras para la hora
             hora="0"+hora;
             }
         if (minuto<10) { //dos cifras para el minuto
             minuto="0"+minuto;
             }
         if (segundo<10) { //dos cifras para el segundo
             segundo="0"+segundo;
             }
         //devolver los datos:
         mireloj = hora+" : "+minuto+" : "+segundo;	
         return mireloj; 
         }

En esta función primero buscamos la fecha mediante el objeto Date(). Después mediante los métodos getHours, getMinutes, getSeconds obtenemos la hora, el minuto y el segundo.

Como en la hora, minuto y segundo obtenido, cuando estos son menores de 10 se muestran con una sola cifra, y nosotros queremos que en todo momento se muestren dos cifras, añadimos unas estructuras if que añaden un cero delante del número cuando éste tiene una sola cifra.

Por último juntamos los tres datos en la variable mireloj, dándole el formato que va a tener en el reloj, y los devolvemos.

Ahora que ya tenemos la hora tal y como se mostrará en el reloj, sólo hace falta iniciar el temporizador y ponerlo en marcha, para ello añadimos en el código javascript las siguientes líneas:

function actualizar() { //función del temporizador
   mihora=actual(); //recoger hora actual
   mireloj=document.getElementById("reloj"); //buscar elemento reloj
   mireloj.innerHTML=mihora; //incluir hora en elemento
	 }
setInterval(actualizar,1000); //iniciar temporizador

Para utilizar el temporizador necesitamosm primero crear una función que será la que se repetirá a intérvalos. Esta es la función actualizar.

Dentro de esta función llamamos a la función que hemos hecho aneriormente (actual), para que nos devuelva la hora.

Una vez que tenemos la hora la ponemos dentro del div que forma el reloj.

Por último iniciamos el temporizador para que repita esta funcion cada segundo.

00 : 00 : 00

Con esto ya hemos acabado el reloj digital, el cual quedará tal y como lo vemos aquí a la derecha.

Recuerda que para cambiar el aspecto, tanto en tamaño, colores, tipo de letra, etc, sólo tienes que modificar el código CSS, para que quede tal y como quieres, y luego insertarlo en el lugar de la página en el que quieras tenerlo.

En el siguiente enlace se muestra el código completo del reloj digital.





En la siguiente página haremos un cronómetro que podemos ponerlo en marcha o pararlo cuando queramos.

Cronómetro.



Practicas js: el tiempo

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com