Cronómetro funcional

Lección 9 de 10 del curso Cronómetro - Proyecto de HTML/CSS/JS de Coddy.

Ahora, una vez que tenemos los botones de inicio y parada funcionando, ¡es hora de empezar a contar!

Para contar, utilizaremos una función de JavaScript llamada setInterval:

const interval = setInterval(func, milliseconds)

La función recibe dos argumentos: una función y un número que representa milisegundos. La función se llama cada vez que transcurre el número de milisegundos proporcionado.

Así que, por ejemplo:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

En el ejemplo anterior, aumentamos la variable count en 1 cada segundo.

Si quieres detener un intervalo, utiliza clearInterval con el valor de retorno de setInterval:

const interval = setInterval(updateCount, 1000)
clearInterval(interval)

Desafío

Intermedio

Agrega el siguiente soporte a tu archivo JS:

Una vez que se haga clic en el botón de inicio/parada, establece un intervalo que actualice el texto del cronómetro cada segundo en uno, asegúrate de que esté formateado correctamente.
Una vez que se haga clic en el botón de inicio/parada nuevamente, borra el intervalo en ejecución.

Una vez que agregues un setInterval a tu código, deberás hacer clic en el botón de reinicio en la vista web:

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>