Menu
Coddy logo textTech

Работающий секундомер

Урок 9 из 10 курса Секундомер — проект на HTML/CSS/JS на Coddy.

Теперь, когда у нас есть работающие кнопки запуска и остановки, пришло время начать отсчет!

Для отсчета мы будем использовать функцию JavaScript под названием setInterval:

const interval = setInterval(func, milliseconds)

Функция принимает два аргумента: функцию и число, представляющее миллисекунды. Функция вызывается через каждый указанный интервал миллисекунд.

Например:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

В приведенном выше примере мы увеличиваем переменную count на 1 каждую секунду.

Если вы хотите остановить интервал, используйте clearInterval с возвращаемым значением setInterval:

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

Задание

Средне

Добавьте следующую поддержку в ваш JS-файл:

  • После нажатия кнопки start/stop установите интервал, который будет обновлять текст секундомера каждую секунду на единицу, убедитесь, что он отформатирован правильно.
  • При повторном нажатии кнопки start/stop очистите запущенный интервал.

Как только вы добавите setInterval в свой код, вам нужно будет нажать кнопку сброса в веб-интерфейсе:

Попробуйте сами

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

Все уроки раздела Секундомер — проект на HTML/CSS/JS

1Введение

Обзор

4Часть JS

Базовый запуск и остановкаУрок-проектРаботающий секундомерУрок-проектСбросУрок-проект