Ejercicio JS – Crear un cronómetro con javascript

*{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;}

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

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);
}

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.