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 II

Cronómetro I

Descripción del ejercicio

0 00 00 00

En este ejercicio crearemos cronómetro como el que vemos aquí a la derecha para insertar en la página.

El cronómetro consta de un visor en donde de izquierda a derecha marca: horas, minutos, segundos, y centésimas de segundo. Debajo hay dos botones de control.

Cada uno de los botones tiene dos funciones. El botón de la izquierda sirve para iniciar el cronómetro cuando éste está a cero. Cuando no está a cero sirve para reiniciarlo y ponerlo a cero.

El botón de la derecha sirve para parar el cronómetro cuando éste está en marcha. Una vez lo hemos parado, si queremos seguir la cuenta en donde la hemos dejado volvemos a pulsarlo.

Aquí a la derecha, hemos pusto ya el cronómetro acabado, puedes combrabar su funcionamiento.

Observa que mientras el cronómero está a cero, el segundo botón está inactivo, ya que la cuenta no se ha iniciado.

Planteamiento del ejercicio

En primer lugar creamos el "div" que contendrá el cronómetro, ahí dentro pondremos un recuadro con el reloj (visor), y un formulario con los botones de control.

Mediante un temporizador, (método setInterval()) controlaremos el tiempo para que cambie el reloj en cada centésima de segundo

Tenemos que controlar también el estado de los botones, para poder cambiar mediante funciones el comportamiento del visor o reloj, haciéndole funcionar o no, y reteniendo los datos que ya tenemos o no, dependiendo de si queremos reiniciar el cronómetro o seguir contando en donde lo habíamos dejado.

Veamos a continuación el desarrollo del ejercicio:


Códigos HTML y CSS

Creamos en primer lugar el código HTML del elemento, este será el siguiente:

<div id="cronometro">
  <div id="reloj">
    0 00 00 00
  </div>
  <form name="cron" action="#">
    <input type="button" value="Empezar" name="boton1"   />
    <input type="button" value="Parar" name="boton2"  /><br/>
  </form>
</div>

El codigo HTML consiste en un elemento o div en el cual incluimos en primer logar el visor, formado por el div id="reloj", y después un formulario con dos botones que serán los controles del cronómetro.

Veamos ahora el codigo CSS

#cronometro { padding:10px; border: 5px #7c7bff double; width: 200px;
              text-align: center; background-color: #007; border-radius: 5px;
              float: right; margin: 1em 3em 1em 3em; }
#reloj { padding: 5px 10px; width: 170px;border: 1px solid black; 
         font: bold 1em europa, arial; text-align: center; 
         margin: 4px; background-color: #f0ffff; border-radius: 3px;  }
#cronometro [type=button]  { margin: 4px; font: normal 9pt arial; width: 70px; } 

0 00 00 00

Aplicamos el estilo al recuadro en sí, al visor y a los botones. Aquí el código CSS está adaptado para verlo en esta página a la derecha, y con un cierto tamaño. Tu puedes cambiar el código para que se adapte a tu página.

El resultado es el que vemos aquí a la derecha. El cronómetro, evidentemente no funciona porque aún no hemos escrto el código javascript, pero este es el aspecto que tendrá, de momento.

Queremos mejorar su aspecto cambiando el tipo de cifras que muestra, de forma que tengan un aspecto más digital. Para elo basta con cambiar el tipo de fuente (propiedad font-family).

Sin embargo, y para asegurarnos de que aparecerá la "fuente" que nosotros queremos, debemos ponerla en la página, y llamarla mediante la regla @font-face

En el manual de CSS3 página 10 "Tipos de letras", se explica el funcionamiento de la regla @font-face. Además también indicamos el sitio http://www.fontsquirrel.com/ en donde tenemos cientos de fuentes para bajarnos de forma gratuita.

Nosotros hemos elegido en esta página una fuente llamada "Digital Dreams". Al bajarla vemos que podemos optar entre distintas formas de la misma fuente. Elegimos el cuarto, llamado "DIGITALDREAMFATSKEW.ttf".

Volvemos a la página de Font Squirrel, pero esta vez en la pestaña "WEBFONT GENERATOR" , ahi, tal como explicamos en la página de CSS3 "Tipos de letras", pulsamos en el botón "Add Fonts", y subimos nuestra fuente para obtener el conjuto de archivos de fuentes que podremos usar en nuestra web.

Si quieres ahorrarte todos estos pasos, nosotros hemos los hemos hecho ya y hemos obtenido el archivo comprimido tipo zip. Este lo puedes descargar en el siguiente enlace:

Descargar fuente Digital Dreams

Descargamos el archivo y lo guardamos dentro de una carpeta que llamaremos digital_dream. La carpeta debe estar en el mismo directorio que tenemos la página en la que estamos trabajando.

Dentro de la carpeta buscamos el archivo styleseet.css. Abrimos este archivo con el editor de textos y vemos lo siguiente:

 /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 26, 2014 */

@font-face {
    font-family: 'digital_dream_fat_skewregular';
    src: url('digitaldreamfatskew-webfont.eot');
    src: url('digitaldreamfatskew-webfont.eot?#iefix') format('embedded-opentype'),
         url('digitaldreamfatskew-webfont.woff2') format('woff2'),
         url('digitaldreamfatskew-webfont.woff') format('woff'),
         url('digitaldreamfatskew-webfont.ttf') format('truetype'),
         url('digitaldreamfatskew-webfont.svg#digital_dream_fat_skewregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Copiamos este código y lo copiamos delante del código CSS que ya habíamos hecho antes. Después de copiarlo le hacemos las siguientes modificaciones:

La línea donde pone font-family :, le cambiamos el valor, dejandolo así:

font-family : 'digital_dream';

En las líneas donde pone url, añadimos a las rutas que se indican (dentro de las comillas) el nombre de la carpeta que hemos creado, por ejemplo:

url('digital_dream/digitaldreamfatskew-webfont.eot');

Por último, en el código que ya teníamos de antes, vamos a la regla que empieza por #reloj, y cambiamos el valor de la propiedad font, de manera que queda así:

font: normal 1em digital_dream;

El código CSS quedará ahora así:

 /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 26, 2014 */
@font-face {
    font-family: 'digital_dream';
    src: url('digital_dream/digitaldreamfatskew-webfont.eot');
    src: url('digital_dream/digitaldreamfatskew-webfont.eot?#iefix') format('embedded-opentype'),
         url('digital_dream/digitaldreamfatskew-webfont.woff2') format('woff2'),
         url('digital_dream/digitaldreamfatskew-webfont.woff') format('woff'),
         url('digital_dream/digitaldreamfatskew-webfont.ttf') format('truetype'),
         url('digital_dream/digitaldreamfatskew-webfont.svg#digital_dream_fat_skewregular') format('svg');
    font-weight: normal;
    font-style: normal;
}		
#cronometro { padding:10px; border: 5px #7c7bff double; width: 200px;
              text-align: center; background-color: #007; border-radius: 5px;
              float: right; margin: 1em 3em 1em 3em; }
#reloj { padding: 5px 10px; width: 90% ;border: 1px solid black; 
         font: normal 1em digital_dream; text-align: center; 
         margin: 4px; background-color: #f0ffff; border-radius: 3px;  }
#cronometro [type=button]  { margin: 4px; font: normal 9pt arial; width: 70px; } 
 

0 00 00 00

Ahora el cronómetro ya tiene el aspecto que vemos aquí a la derecha, Ya sólo nos falta crear el código javascript para hacerlo funcionar. Pero eso ya lo veremos en la siguiente página.





En la siguiente página continuamos el ejercicio que hemos empezado en esta, para acabar de construír un cronómetro.

Cronómetro II.



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