Działający stoper

Lekcja 9 z 10 w kursie Stoper – projekt HTML/CSS/JS w Coddy.

Teraz, gdy mamy już działające przyciski uruchamiania i zatrzymywania, czas zacząć liczyć!

Do liczenia użyjemy funkcji JavaScript o nazwie setInterval:

const interval = setInterval(func, milliseconds)

Funkcja przyjmuje dwa argumenty: funkcję i liczbę oznaczającą milisekundy. Funkcja jest wywoływana co podaną liczbę milisekund.

Na przykład:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

W powyższym przykładzie zwiększamy zmienną count o 1 co sekundę.

Jeśli chcesz zatrzymać interwał, użyj clearInterval z wartością zwracaną przez setInterval:

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

Wyzwanie

Średni

Dodaj następującą obsługę do pliku JS:

Po kliknięciu przycisku start/stop ustaw interwał, który będzie co sekundę zwiększać wartość tekstu stopera o jeden, upewnij się, że jest poprawnie sformatowany.
Po ponownym kliknięciu przycisku start/stop wyczyść działający interwał.

Po dodaniu setInterval do kodu kliknij przycisk resetowania w widoku internetowym:

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>