В сегодняшней статье я покажу вам, как можно создать простой секундомер на JavaScript с помощью функции-конструктора.

Функция-конструктор — это функция, которая используется для создания объектов.

Повторение предметов

Объект — это неупорядоченный набор данных в виде пар ключ-значение. Одна пара этих данных называется свойством этого объекта.

Вот несколько способов создать объект в JavaScript;

  • Использование синтаксиса литерала объекта {
  • Использование функции-конструктора
  • Использование фабричной функции

Поняв, что такое объекты и как их создать, я покажу вам, как использовать функцию-конструктор для создания секундомера.

ДАВАЙ НАЧНЕМ

Наша функция конструктора будет называться StopWatch, и у нее будут переменные и методы, которые будут запускать наши часы, останавливать наши часы, сбрасывать наши часы и отображать продолжительность.

Метод — это свойство объекта, содержащее определение функции.

Мы создадим переменные внутри нашей функции-конструктора ниже, и эти переменные должны быть изменены только методами внутри нашей функции.

Вот переменные в нашей функции-конструкторе;

  • isStart

Эта переменная будет использоваться для проверки того, запущены ли наши часы. Если значение равно true, это означает, что отслеживание запущено, а если значение равно false, это означает, что отслеживание остановлено или не запущено.

  • startCount

Эта переменная будет хранить метку времени, когда наши часы были запущены.

  • stopCount

Эта переменная будет хранить метку времени, когда наши часы были остановлены.

  • durationCount

Эта переменная сохраняет продолжительность, находя разницу между startCount и stopCount.

  • preDuration

Эта переменная хранит предыдущую продолжительность, пока секундомер не сброшен.

МЕТОД ЗАПУСКА

Теперь мы собираемся создать первый метод, который будет отвечать за запуск наших часов.

Этот метод проверит:

  • Если часы уже запущены, т.е. isStart == true

Если да, на консоль будет выведено сообщение, информирующее пользователя о том, что наблюдение уже запущено.

Если нет, он запустит часы, получив отметку времени из объекта даты и сохранив ее в startCount, а затем изменит значение isStart на true.

  • Если startCount равен нулю (0).

Эта переменная содержит временную метку, когда наши часы были запущены. Если значение равно нулю (0), часы запустятся, извлекая метку времени из объекта даты и сохраняя ее в startCount, затем значение isStart будет изменено на true. >. Затем он сообщит пользователю, что отслеживание запущено.

  • Если ничего из вышеперечисленного не соответствует действительности

Он запустит часы, извлекая метку времени из объекта даты и сохраняя ее в startCount, а затем меняет значение isStart на true. Затем он сообщит пользователю, что наблюдение было продолжено, т. е. возобновится.

МЕТОД ОСТАНОВКИ

Этот метод будет отвечать за остановку наших часов.

Этот метод проверит:

  • Если часы запустились. т.е. isStart == true

В противном случае он сообщит пользователю, что часы не запущены.

Если да, он остановит часы, извлекая метку времени из объекта даты и сохраняя ее в stopCount, а затем меняет значение isStart на false.

Затем он сообщит пользователю, что часы остановлены.

ПРОДОЛЖИТЕЛЬНОСТЬ МЕТОД

Этот метод отвечает за вычисление и возврат времени, прошедшего с часов, в секундах.

Важно отметить, что использование метода getTime() для извлечения метки времени из объекта даты возвращает время в миллисекундах, и нам нужно разделить это значение на 1000, чтобы получить время в секундах.

Затем мы сохраняем результат в предыдущей переменной длительности preDuration, чтобы мы продолжали добавлять его к новой длительности до тех пор, пока часы не будут сброшены.

Вы также заметите, что я преобразовал время в минуты, если оно больше 60. Это означает, что вместо 120 секунд вы увидите 2 минуты.

Большинство результатов будут заканчиваться десятичными знаками, поэтому необходимо аппроксимировать их до 1 десятичного знака с помощью метода toFixed().

МЕТОД СБРОСА

Это последний метод нашего секундомера, который будет использоваться для возврата часов в исходное состояние.

Все, что он делает, это сбрасывает переменные, объявленные в нашей функции-конструкторе, в их начальное состояние.

Вот полный код

Чтобы протестировать наши часы, вам нужно скопировать и вставить указанную выше функцию конструктора в консоль вашего браузера, создать экземпляр объекта и запустить тест!

Вот список методов;

  • start(): этот метод запускает или возобновляет остановленное наблюдение.
  • stop(): этот метод останавливает часы.
  • duration(): этот метод вычисляет и возвращает прошедшее время.
  • reset(): этот метод сбрасывает часы в исходное состояние.

Вот мой результат

Когда я хочу, чтобы часы продолжили работу с того места, где они остановились, я просто вызываю метод start() без необходимости сбрасывать часы.

Что, если мы заставим секундомер работать пару минут?

Если вам когда-нибудь понадобится сбросить часы, просто вызовите метод сброса reset() для экземпляра вашего объекта.

Вы можете поэкспериментировать со своим новым компьютерным секундомером JavaScript и проверить согласованность результатов, замерив время запуска и остановки, а затем сравнив их с вашим локальным секундомером. Кто знает? Они могут иметь одинаковую продолжительность.

Спасибо.

Вы читали мою статью о том, как проверить ваши HTML-формы с помощью octaValidate? Если нет, перейдите на статью по этой ссылке.