В сегодняшней статье я покажу вам, как можно создать простой секундомер на 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? Если нет, перейдите на статью по этой ссылке.