Делаем собственный таймер для спорта

Те, кто зани­ма­ет­ся спор­том, зна­ют: часто нужен тай­мер. Кому-то надо отме­рять интер­ва­лы по мину­те, кому-то — сколь­ко рабо­та­ешь, столь­ко отды­ха­ешь; кому-то нуж­ны слож­ные интер­ва­лы и кру­ги; кому-то про­сто секун­до­мер. На всё это, конеч­но, в интер­не­те пол­но гото­вых про­грамм, но поче­му бы не сде­лать свою?

Если вы про­пу­сти­ли наш пер­вый урок по созда­нию пол­но­цен­ных про­грамм, где мы рас­ска­зы­ва­ем про инстру­мен­ты и основ­ные момен­ты, про­чи­тай­те его сей­час. Без это­го вам будет слож­нее разо­брать­ся, что здесь про­ис­хо­дит, и что это всё вооб­ще такое.

Как устроен интервальный таймер

Наш сце­на­рий рабо­ты такой: поль­зо­ва­тель зада­ёт вре­мя одно­го упраж­не­ния и пере­ры­ва после него, а потом ука­зы­ва­ет, сколь­ко раз он хочет выпол­нить это упраж­не­ние с пере­ры­вом. Напри­мер, сто­ять в план­ке на про­тя­же­нии мину­ты, потом отды­хать 45 секунд, повто­рить восемь раз. Полу­ча­ет­ся, что основ­ных пара­мет­ров у нас три: вре­мя тре­ни­ров­ки, вре­мя отды­ха, коли­че­ство подходов.

Что­бы во вре­мя тре­ни­ров­ки мож­но было не смот­реть на экран, надо преду­смот­реть зву­ко­вое опо­ве­ще­ние. Оно под­ска­жет, что закон­чил­ся оче­ред­ной интер­вал, и нуж­но отдох­нуть или сно­ва при­сту­пить к упражнению.

Основа страницы

Возь­мём стан­дарт­ный шаб­лон страницы:

Теперь пора­бо­та­ем со слу­жеб­ным раз­де­лом .. и напол­ним его нуж­ны­ми командами:

Под­клю­ча­ем там же фрейм­ворк jQuery, кото­рый упро­стит нам рабо­ту с тай­ме­ром и его компонентами:

Теперь раз­ме­стим все эле­мен­ты интер­фей­са на стра­ни­це. Нач­нём с обще­го бло­ка, где будет наш таймер:

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

Звук мы взя­ли где-то из интер­не­та и поло­жи­ли в ту же пап­ку, что и наша программа.

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

Для нача­ла поме­стим на фор­му спе­ци­аль­ный заго­ло­вок. Его хит­рость в том, что он будет неви­ди­мой кноп­кой, на кото­рую нажмёт скрипт, когда всё загру­зит­ся. После тако­го вир­ту­аль­но­го нажа­тия наш тай­мер полу­чит свои началь­ные зна­че­ния и будет готов к работе.

Тег — это кон­тей­нер, как бы про­зрач­ная обёрт­ка для сво­е­го содер­жи­мо­го. С его помо­щью мы можем отдель­но настро­ить внеш­ний вид и пове­де­ние наше­го тек­ста. Теперь у наше­го заго­лов­ка есть внут­рен­нее имя «Secret» и класс «timer_types_btn» , кото­рый пока ещё нигде не прописан.

На этом эта­пе у нас будет пустая стра­ни­ца с над­пи­сью «Интер­валь­ный тай­мер». Пока что ниче­го интересного.

Интерфейс

Интер­фейс тай­ме­ра мы упа­ку­ем в соб­ствен­ный блок, что­бы мож­но было настра­и­вать как общий вид, так и части по отдель­но­сти. Его мы встав­ля­ем в нашу фор­му после бло­ка с заголовком:

Пер­вое, что мы в него доба­вим — интер­фейс настро­ек тре­ни­ров­ки, где мож­но будет выбрать вре­мя и коли­че­ство повто­ре­ний. Сна­ча­ла доба­вим в него настрой­ку вре­ме­ни на упражнения:

Внут­ри это­го бло­ка у нас три раз­де­ла: один отве­ча­ет за мину­ты, вто­рой — за двое­то­чие, тре­тий — за секун­ды. Свой­ство contenteditable=»true» озна­ча­ет, что этот кон­тент мож­но изме­нять, щёл­кая мыш­кой и вво­дя свои значения.

Так же доба­вим бло­ки коли­че­ства под­хо­дов и вре­ме­ни отдыха:

Встав­ля­ем это всё в нашу панель настро­ек и смот­рим, что получилось:

Табло для отсчёта времени и кнопки

Для боль­шо­го таб­ло исполь­зу­ем тот же код, что и для пане­ли настро­ек, толь­ко при­ме­ним потом дру­гой класс оформления:

Кноп­ки сде­ла­ем с помо­щью стан­дарт­но­го тега . Каж­дой кноп­ке при­сво­им своё имя и иден­ти­фи­ка­тор, что­бы мож­но было с ними рабо­тать из скрипта:

Вот наш интер­фейс. Ста­вим его в фор­му на стра­ни­це и смот­рим на результат:

Настраиваем внешний вид

Оче­вид­но, что тай­мер наш выгля­дит скром­но­ва­то. Нуж­но его офор­мить. Для это­го исполь­зу­ем CSS — сти­ли оформ­ле­ния эле­мен­тов на странице.

Как вы помни­те, CSS-стили мож­но выно­сить в отдель­ный файл, а мож­но писать в раз­де­ле с помо­щью тега

Смот­ри­те, у нас появи­лась новая коман­да в теге скрип­та: defer . Она запре­ща­ет скрип­ту выпол­нять­ся, пока стра­ни­ца пол­но­стью не загру­зит­ся. Это поз­во­ля­ет нам сна­ча­ла под­го­то­вить стра­ни­цу цели­ком, а толь­ко потом запус­кать таймер.

Теперь напол­ним наш скрипт. Нач­нём с переменных:

Теперь напи­шем функ­цию, кото­рая будет посто­ян­но гото­вить к запус­ку наше зву­ко­вое опо­ве­ще­ние. Она будет брать нуж­ные нам фай­лы ogg и mp3 и под­клю­чать их к нашей странице:

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

Ну и доба­вим эсте­ти­ки в про­грам­му — для кра­со­ты будем ста­вить пер­вым ноль, если чис­ло минут или секунд мень­ше девяти:

Отдель­ной функ­ци­ей сде­ла­ем отоб­ра­же­ние вре­ме­ни на таб­ло. Там как раз и при­го­дит­ся наша функ­ция, кото­рая пере­во­дит секун­ды в минуты:

Теперь преду­смот­рим сме­ну вре­ме­ни каж­дую секун­ду, пока рабо­та­ет тай­мер. Для это­го будем отдель­но обра­ба­ты­вать два режи­ма: тре­ни­ров­ки и отды­ха. Не забу­дем про кра­со­ту — вре­мя тре­ни­ров­ки сде­ла­ем зелё­ным, как на пане­ли настро­ек, а вре­мя отды­ха — красным:

Продолжение скрипта: обрабатываем нажатия на кнопки

Нач­нём с кноп­ки «Старт». Логи­ка рабо­ты такая: сле­дим за тем, в каком режи­ме рабо­та­ет тай­мер, не забы­вая скры­вать «Старт» и пока­зы­вать «Пау­зу» после запус­ка. Как толь­ко пере­шли к отды­ху или сно­ва к тре­ни­ров­ке — вклю­ча­ем зву­ко­вой сиг­нал. Если все тре­ни­ров­ки про­шли, но мы сно­ва нажа­ли «Старт», нач­нём всё сначала:

Теперь оче­редь кноп­ки «Пау­за». Она появ­ля­ет­ся в тот момент, когда мы нажи­ма­ем на кноп­ку «Старт», кото­рая сра­зу исче­за­ет. Логи­ка чуть дру­гая: при каж­дом нажа­тии мы про­сто оста­нав­ли­ва­ем интер­вал и тоже вклю­ча­ем звук, что­бы обо­зна­чить сме­ну режима:

Послед­нее, что оста­лось — запро­грам­ми­ро­вать реак­цию на нажа­тие кноп­ки «Сброс». Поря­док дей­ствий будет такой: вир­ту­аль­но щёл­ка­ем по кноп­ке «Пау­за», обну­ля­ем таб­ло, и выстав­ля­ем стар­то­вые зна­че­ния по умол­ча­нию в нашу панель настроек:

Теперь соби­ра­ем скрипт в один файл, сохра­ня­ем, обнов­ля­ем нашу стра­ни­цу и нажи­ма­ем на «Старт». Всё, успех — тай­мер начал отсчёт:

https://thecode.media/timer/