Секундомер JavaScript Часть 2

Секундомер JavaScript - Часть 2

По пути к JS Stopwatch мы сделали:

  • простая страница с базовой разметкой HTML
  • мы применили необходимые стили
  • мы загрузили jQuery и установили функцию для выполнения в DOMContentLoaded

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

Давайте изменим текст хронометра с 00:00:00 на 00: 00: 00,000. Мы просто добавляем миллисекунды, чтобы более подробно отслеживать изменения времени..

Я предпочитаю сначала создать несколько переменных, которые буду использовать в своем коде, а затем изменить их значение:

jQuery (функция ($) {var trigger = $ (‘# секундомер a’); var label = $ (‘# секундомер’);});

В этих двух переменных мы напишем ссылку на элементы страницы, которые мы будем использовать. Лично я предпочитаю записывать их в отдельных переменных по двум причинам:

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

Обработка событий кликов

Затем установим обработчик кликов на нашу ссылку:

jQuery (функция ($) {var trigger = $ (‘# секундомер a’); var label = $ (‘# интервал секундомера’);
trigger.click (функция (e) {e.preventDefault ();}); });

Мы вызываем e.preventDefault (), чтобы ограничить действие по умолчанию при нажатии на ссылку, которая попытается отправить нас на другую страницу (в этом случае атрибут href — это просто «#», который на самом деле никуда нас не отправит, но все равно вернул нас в начало страницы, что иногда может быть побочным эффектом).

Теперь нам нужно проверить наш код, если секундомер больше не работает, и в зависимости от этого нам нужно включить или выключить его. Свяжем сам релиз с новой переменной, значением которой будет фактическая проверка. В этой переменной мы сохраним повторяющееся действие, которое обновит показания хронометра. Если эта переменная не имеет значения — запускаем, иначе — останавливаем.

jQuery (функция ($) {var timer = null; var startTime = 0;
var trigger = $ (‘# секундомер a’); var label = $ (‘# интервал секундомера’);
trigger.click (функция (е) {e.preventDefault ());
если (! таймер) {startTime = новая дата (); } еще {
}}); });

Читать также:  Бандлеры

setTimeout и setInterval

Мы также создаем переменную StartTime, которую мы изначально приравниваем к 0. При запуске секундомера мы устанавливаем его значение как момент запуска. Теперь мы должны установить это повторяющееся действие, о котором мы упоминали минуту назад. Мы еще не говорили о таких вещах, но в JavaScript у нас есть возможность вызывать функцию через определенное время. Для этого используем setTimeout (). Мы также можем установить периодическое выполнение функции с заданным интервалом, используя setInterval (). Синтаксис самих функций такой же, за исключением того, что setTimeout () выполняет функцию только один раз, а setInterval () выполняет ее бесконечно. Или, по крайней мере, до тех пор, пока мы не отменим его с помощью clearInterval ().

jQuery (функция ($) {var FRAME_PERIOD = 1000/60; var timer = null; var startTime = 0;
var trigger = $ (‘# секундомер a’); var label = $ (‘# интервал секундомера’);
trigger.click (функция (е) {e.preventDefault ());
если (! таймер) {startTime = новая дата (); timer = setInterval (функция) (var {currentTime = new Date (new Date () — startTime);
метка.text (formatTime (currentTime)); }, FRAME_PERIOD);
trigger.text (‘Стоп’); } else {clearInterval (таймер); таймер = ложь;
trigger.text (‘Старт’); }}); });

Вот комментарии к последнему коду:

В начале вы видите добавленную переменную FRAME_PERIOD. Он написан заглавными буквами, так как его идея неизменна. Как мы уже говорили — в JavaScript мы не можем устанавливать константы, поэтому мы используем простую переменную. Мы устанавливаем его значение 1000/60. Откуда это число? Это период обновления изображения мониторов. У нас есть 1000 миллисекунд в секунду, разделенные на 60 Гц (обычно не меньше) частоты обновления изображения, снова в секунду..

В обработчике щелчка ссылки мы добавляем код, который назначает переменному таймеру периодически повторяющуюся функцию, установленную setInterval. Последняя функция принимает первый аргумент как функцию для выполнения, а второй аргумент как период между выполнениями. Мы устанавливаем этот период равным времени обновления экрана. Эта функция покажет, сколько времени прошло. Чтобы что-то написать, нам нужно обновить картинку. Иначе мы просто не сможем это прочитать.

Читать также:  Что такое параллакс

Расчет времени

В теле периодической функции мы создаем локальную переменную, значением которой является дата. Эта дата является текущим моментом за вычетом момента нажатия кнопки «Старт». Момент в JS хранится как количество миллисекунд с 01.01.1970 00:00:00. Таким образом, дата минус другая дата дает только количество миллисекунд между двумя моментами. Мы рассматриваем это различие как новый момент, отправляя его в качестве аргумента функции new Date (). Затем мы назначаем текст метке на основе этого времени, но передаем через функцию, которую мы сейчас опишем. Задача этой функции — представить время в гормате «00: 00: 00,000»..

function formatTime (time) {return leadingZero (time.getUTCHours ()) + ‘:’ + leadingZero (time.getMinutes ()) + ‘:’ + leadingZero (time.getSeconds ()) + ‘,’ + ведущий ноль (время. getMilliseconds (), 3); }

В этой функции мы используем другую — leadZero (), которую мы сейчас напишем. Его задачей будет представлять однозначные числа с нулями впереди. Таким образом, вместо 0: 0: 1,123 мы имеем 00: 00: 01,123. Что мы делаем в formatTime (), так это объединяем (соединяем строки) элементы времени, которые мы принимаем с помощью нескольких встроенных функций для объектов Date. Это функции getUTCHours (), getMinutes (), getSeconds () и getMilliseconds (). Обратите внимание, что мы используем getUTCHours () вместо обычного getHours (), потому что getHours () возвращает часы в соответствии с нашим часовым поясом. Вычисляя разницу между моментами, мы получаем разницу как период среднего времени по Гринвичу. Итак, в моем случае getHours () вернет 2, поскольку я нахожусь в часовом поясе GMT ​​+ 2 (Болгария).

А вот так выглядит функция leadZero ():

функция leadZero (число, длина) {if (typeof (length) == ‘undefined’) {length = 2; }
в то время как (число.toString (). длина длина) {число = ‘0’ + число; }
return num; }

Сначала обратите внимание на использование второго аргумента. Вызов функции с его помощью мы имеем при форматировании миллисекунд, потому что они должны быть не только 2 цифрами, а тремя. Это количество цифр в числе, которое упоминается этим вторым аргументом..

Читать также:  DISC категоризация людей в зависимости от того как они работают

Значения по умолчанию для аргументов в JavaScript

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

функция leadZero (число, длина = 2) {// …}

Однако в JavaScript это не повлияет..

Нормальный язык выдаст ошибку, если мы передадим 2 аргумента функции, ожидающей 3. Однако JavaScript просто проверяет, есть ли совпадение. В функции мы можем попытаться получить доступ к другому количеству аргументов. Если они представлены — отлично. Если их нет — мы получим значение только некоторых, а остальные будут иметь неопределенное значение.

Итак, мы выполняем проверку if (typeof (length) == ‘undefined’), которая проверяет, не определена ли переменная. Если это так, то мы должны использовать его значение по умолчанию, поэтому мы присваиваем ему значение 2..

Затем с помощью цикла добавляем к числу нулей столько, сколько разницы в длине символов, которыми оно написано. Даже после первого добавления 0 переменная больше не имеет числового типа, а обрабатывается как строковый литерал (строка). Почему и что это определяет, я объясню в другом уроке, а пока просто хорошо знать.

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

jQuery (функция ($) {var FRAME_PERIOD = 1000/60; var timer = null; var startTime = 0;
var trigger = $ (‘# секундомер a’); var label = $ (‘# интервал секундомера’);
функция leadZero (число, длина) {if (typeof (length) == ‘undefined’) {length = 2; }
в то время как (число.toString (). длина длина) {число = ‘0’ + число; }
return num; }
function formatTime (time) {return leadingZero (time.getUTCHours ()) + ‘:’ + leadingZero (time.getMinutes ()) + ‘:’ + leadingZero (time.getSeconds ()) + ‘,’ + ведущий ноль (время. getMilliseconds (), 3); }
trigger.click (функция (е) {e.preventDefault ());
если (! таймер) {startTime = новая дата ();
timer = setInterval (функция) (var {currentTime = new Date (new Date () — startTime);
метка.text (formatTime (currentTime)); }, FRAME_PERIOD);
trigger.text (‘Стоп’); } else {clearInterval (таймер);
таймер = ложь;
trigger.text (‘Старт’); }}); });

Вы можете увидеть демонстрацию на странице https://magadanski.com/demo/stopwatch/

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?