Ejercicio JS – Crear un cronómetro con javascript

Ejercicio JS – Crear un cronómetro con javascript

Print Friendly, PDF & Email
Ejercicio JS – Crear un cronómetro con javascript
Valora esta entrada
En este ejercicio vamos a aplicar varios conceptos para crear un cronómetro que se pueda iniciar, parar y reiniciar.

A nivel de CSS necesitaremos:

  • Crear una caja centrada verticalmente y horizontalmente.
  • Aplicar una tipografía personalizada.

A nivel de Javascript necesitaremos:

  • Inicializar eventos al cargar la página.
  • Saber llamar a setInteraval() y eliminarlo a voluntad.
  • Dominar addEventListener() y removeEventListener()

Vamos a repasarlo mediante un ejercicio.

Enunciado

Haz un cronómetro como el de la imagen que se pueda iniciar, parar y reiniciar. Como particularidad, haz que el botón de play sólo tenga efecto cuando el reloj no esté en marcha.

Los recursos utilizados en el ejercicio los encontraréis en las siguientes enlaces:

cronómetro con javascript
cronómetro

Usa el siguiente html:

<div class="cronometro">
    <div id="hms"></div>
    <div class="boton start"></div>        
    <div class="boton stop"></div>
    <div class="boton reiniciar"></div>
</div>
Ver solución (Haz clic)

Solución del ejercicio

Vamos a comentar la solución en 2 bloques separados: CSS y Javascript.

Código CSS

*{box-sizing:border-box;margin:0;padding:0;}
@font-face{
    font-family:alarm;
    src:url(alarm.ttf);
}
.cronometro{
    width:200px;
    height:100px;
    top:50%;
    left:50%;
    position:absolute;
    margin-top:-50px;
    margin-left:-100px;
    text-align:center;
} 
.boton{display:inline-block;width:32px;height:32px;position:relative;}
#hms{
    height:68px;
    padding:5px 0;
    font-size:50px;
    color:#000;
    font-family: alarm;  
 }
    .start{background:url(start.png) 0 0 no-repeat;}
    .stop{background:url(pause.png) 0 0 no-repeat;}
    .reiniciar{background:url(delete.png)0 0 no-repeat;}

Explicación del código CSS

La propiedad box-sizing nos garantiza que los width y height que digamos no se verán afectados por el padding ni por el border.

La caja cronómetro tiene un posicionamiento absoluto y se referencia en base a la ventana del navegador. Tiene un top:50% y un left:50% seguido de un desplazamiento superior y a la izquierda mediante los margin negativo. Se desplaza exactamente la mitad del ancho y la mitad de la altura.

Dentro de la caja cronómetro veremos todas las otras cajas.

Las cajas de los botones están centradas y son de tipo inline-block con un ancho y altura fijos para apilarlas una al lado de la otra. De haber usado un float no las hubiésemos podido centrar.

Se ha agregado una tipografía que se ha buscado en el portal dafont.com para estilizar un poco la hora.

Los botones tienen una imagen de fondo que se ha buscado en iconfinder.com

Código Javascript

window.onload = init;
function init(){
    document.querySelector(".start").addEventListener("click",cronometrar);
    document.querySelector(".stop").addEventListener("click",parar);
    document.querySelector(".reiniciar").addEventListener("click",reiniciar);
    h = 0;
    m = 0;
    s = 0;
    document.getElementById("hms").innerHTML="00:00:00";
}         
function cronometrar(){
    escribir();
    id = setInterval(escribir,1000);
    document.querySelector(".start").removeEventListener("click",cronometrar);
}
function escribir(){
    var hAux, mAux, sAux;
    s++;
    if (s>59){m++;s=0;}
    if (m>59){h++;m=0;}
    if (h>24){h=0;}

    if (s<10){sAux="0"+s;}else{sAux=s;}
    if (m<10){mAux="0"+m;}else{mAux=m;}
    if (h<10){hAux="0"+h;}else{hAux=h;}

    document.getElementById("hms").innerHTML = hAux + ":" + mAux + ":" + sAux; 
}
function parar(){
    clearInterval(id);
    document.querySelector(".start").addEventListener("click",cronometrar);

}
function reiniciar(){
    clearInterval(id);
    document.getElementById("hms").innerHTML="00:00:00";
    h=0;m=0;s=0;
    document.querySelector(".start").addEventListener("click",cronometrar);
}

Explicación del código JS

Justo inmediatamente de cargarse el documento se ejecutará la función init.

En la función init asignamos eventos a cada uno de los botones. Son las funciones cronometrar, parar y reiniciar. Haber usado querySelector o getElementById es anecdótico y para fines didácticos.

Las variables h, m y s fijaros que no llevan la palabra var delante. De este modo conseguimos que sean globales (en jerga javascript cuidado si sabes php que el concepto es distinto) y se puedan usar en todo el script dentro y fuera de las funciones.

Función cronometrar

En primer lugar se llama a la función escribir para que se ejecute inmediatamente. La función escribir añade un segundo.

A continuación se llama a setInterval(escribir, 1000). Escribir no lleva paréntesis porqué queremos que se ejecute cada 1000 milisengundos y no inmediatamente la primera vez que se lea.

Se asigna el intervalo creado a una variable de nombre id que nos servirá en las funciones parar y reiniciar. Fijaros que esta variable no ha sido declarada y también es global, pudiéndose usar en cualquier lugar del programa.

En cuanto a la función escribir la filosofía es exactamente la misma que en este ejercicio enlazado. Darle un vistazo.

Una vez se ha iniciado la función cronometrar eliminamos la propiedad del botón de que al clicar se cree un nuevo evento. De este modo evitamos que los segundos se vayan sumando más de una vez a cada segundo.

Función parar

La función parar elimina el intervalo mediante clearInterval(id)

Una vez eliminado el intervalo el botón de iniciar requiere volver a funcionar y por tanto le asignamos de nuevo un evento mediante addEventListener().

Función reiniciar

Es muy parecida a la función parar.

Sin embargo en este caso asignamos el valor “0” a las variables globales h, m y s.

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio – Programación de una ventana infinita cansina en JS
- 159
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Funciones Javascript: declaración, uso y utilidad en programación
- 688
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Métodos javascript
- 437
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Tipos de variables en Javascript
- 1326
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
Ejercicio – Diferencia entre ++x y x++ en Javascript
- 135
En esta publicación se repasa mediante ejercicios la diferencia entre escribir ++x y x++ o --x y x--. Es cuestión de pillarle el tranquillo.
La apasionante historia del Javascript (resumida)
- 588
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Ejercicio – corrección de errores en javascript. Variables y strings.
- 155
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
Eliminar el comportamiento por defecto de todos los enlaces de una web
- 77
Ejercicio javascript dónde se inhabilitan todos los enlaces al cargar una web. Al hacer click en un botón se activan de nuevo. Incluye solución.
Ejercicio – Acoplamiento de javascript en un documento web
- 260
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio JS – Rellenar contenidos usando el DOM
- 147
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.