Crear un cronómetro con Javascript

Crear un cronómetro que pueda arrancar, parar, reiniciar y poner a cero los dígitos

<!DOCTYPE html>
    <html>
        <head>
            <title>Cronometro</title>
        </head>
    <body>

<span id="Horas">00</span>:<span id="Minutos">00</span>:<span id="Segundos">00</span>:<span id="Centesimas">00</span>
<button onclick="start()">Arrancar</button><button onclick="parar()">Parar</button><button onclick="start()">Continuar</button><button onclick="reinicio()">Reiniciar</button>

<script>
var centesimas = 0;
var segundos = 0;
var minutos = 0;
var horas = 0;

function start(){
    control = setInterval(cronometro,10);
}

function parar () {
    clearInterval(control);
}

function reinicio () {
    clearInterval(control);
    centesimas = 0;
    segundos = 0;
    minutos = 0;
    horas = 0;
    document.getElementById("Centesimas").innerHTML = "00";
    document.getElementById("Segundos").innerHTML = "00";
    document.getElementById("Minutos").innerHTML = "00";
    document.getElementById("Horas").innerHTML = "00";
}

    function cronometro(){
        if (centesimas < 99) {
        centesimas++;
        if (centesimas < 10) { centesimas = "0"+centesimas }
        document.getElementById("Centesimas").innerHTML = centesimas;
    }
    if (centesimas == 99) {
        centesimas = -1;
    }
    if (centesimas == 0) {
        segundos ++;
        if (segundos < 10) { segundos = "0"+segundos }
        document.getElementById("Segundos").innerHTML = segundos;
    }
    if (segundos == 59) {
        segundos = -1;
    }
    if ( (centesimas == 0)&&(segundos == 0) ) {
        minutos++;
        if (minutos < 10) { minutos = "0"+minutos }
        document.getElementById("Minutos").innerHTML = minutos;
    }
    if (minutos == 59) {
        minutos = -1;
    }
    if ( (centesimas == 0)&&(segundos == 0)&&(minutos == 0) ) {
        horas ++;
        if (horas < 10) { horas = "0"+horas }
        document.getElementById("Horas").innerHTML = horas;
    }
}
</script>
</body>
</html>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *