Как написать свой таймер

Создаём собственный таймер-напоминалку

В мире мно­же­ство тай­ме­ров и тре­ке­ров про­дук­тив­но­сти. И все они либо невоз­мож­но доро­гие, либо дела­ют мил­ли­он вещей, кро­ме той одной, кото­рая реаль­но нуж­на.

В этой ста­тье мы запро­грам­ми­ру­ем очень про­стой, но зато ваш соб­ствен­ный тай­мер, кото­рый будет напо­ми­нать о нуж­ном деле. Сде­ла­ем его таким, какой он дей­стви­тель­но дол­жен быть, и забу­дем о покуп­ке доро­гих тре­ке­ров.

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

Решение

Алго­ритм реше­ния будет таким:

1. Спра­ши­ва­ем, о чём напом­нить и через сколь­ко минут.
2. Когда наста­нет нуж­ное вре­мя — выво­дим напо­ми­на­ние и при­вле­ка­ем вни­ма­ние к этой вклад­ке.

Как и все про­стые про­грам­мы, мы будем писать эту пря­мо в кон­со­ли «Инспек­то­ра». Что­бы его открыть, най­ди­те в меню бра­у­зе­ра пункт «Кон­соль» (обыч­но где-то в инстру­мен­тах раз­ра­бот­чи­ка) или нажми­те Cmd + Alt + I или Ctrl + Alt + I. Убе­ди­тесь, что у вас откры­та кон­соль. Всё, что мы будем писать в ней, будет сра­зу испол­нять­ся бра­у­зе­ром, а это имен­но то, что нам нуж­но.

Приветствие и вопрос

Теперь узна­ем, о чём нуж­но напом­нить и когда:

Теперь у нас две пере­мен­ные: text и time. В одной — о чём напом­нить, в дру­гой — через сколь­ко мил­ли­се­кунд. Теперь нуж­но научить про­грам­му выво­дить text через вре­мя time.
Что­бы что-то сра­бо­та­ло через опре­де­лён­ное вре­мя, исполь­зу­ем функ­цию setTimeout — мы про неё гово­ри­ли в зада­че про чат-бота:

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

А что­бы при­влечь вни­ма­ние к окну, при­ме­ним про­грам­мист­скую магию и возь­мём функ­цию titleAlert() — она уже встро­е­на в эту стра­ни­цу, поэто­му её мож­но сра­зу исполь­зо­вать.

Функ­ция — как мини-программа внут­ри основ­ной про­грам­мы. У каж­дой функ­ции есть имя — если его напи­сать в теле основ­ной про­грам­мы, то она поста­вит­ся на пау­зу, сде­ла­ет всё, что напи­са­но в функ­ции, а потом про­дол­жит с того места, где оста­но­ви­лась.

Как исполь­зо­вать встро­ен­ные в стра­ни­цу функ­ции — читай­те в отдель­ной ста­тье.

В ито­ге наша функ­ция setTimeout будет выгля­деть так:

Теперь соби­ра­ем всё вме­сте:

Эту про­грам­му мож­но улуч­шить — напри­мер, сде­лать поми­дор­ный тай­мер, кото­рый будет напо­ми­нать о чём-то не одно­крат­но, а посто­ян­но, с рав­ны­ми интер­ва­ла­ми.

Источник статьи: http://thecode.media/le-timer/

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

Без рекламы и встроенных покупок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерфейс

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

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

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

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

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

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

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

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

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

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

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

Как вы помните, CSS-стили можно выносить в отдельный файл, а можно писать в разделе с помощью тега . Выберем второй способ и определим все стили прямо в этом же документе:

Сохраняем код, обновляем страницу в браузере:

Класс! Время тренировки у нас выделено зелёным цветом, отдыха — красным, и благодаря этому мы не перепутаем числа. А ещё появилось большое табло отсчёта времени и две кнопки вместо трёх — «Пауза» автоматически исчезла после загрузки.

Собираем скрипт

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

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

Мы назвали наш скрипт interval_timer_script.js, но название у него может быть каким угодно, лишь бы из английских букв, цифр и без пробелов. Расширение .js должно остаться таким же в любом случае. Меняете имя файла — не забудьте прописать его название в src=»….js», чтобы страница знала, как называется нужный скрипт.

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник статьи: http://zen.yandex.ru/media/code/delaem-sobstvennyi-taimer-dlia-sporta-5cbec4e1621b6d00b28b1706

Делаем свой таймер на Python

У нас когда-то был мини-проект: сде­лать свой таймер-напоминалку, кото­рый спра­ши­ва­ет, про что вам напом­нить, а потом выда­ёт сооб­ще­ние через нуж­ное вре­мя. В про­шлый раз мы его сде­ла­ли на JavaScript, теперь напи­шем на Python. Пото­му что Python — это мод­но, кра­си­во и при­ят­но.

Отличия и особенности

JavaScript пре­кра­сен тем, что его мож­но запу­стить в кон­со­ли любо­го совре­мен­но­го бра­у­зе­ра. Это для него род­ная сре­да, и JS лег­ко рабо­та­ет со стра­ни­ца­ми, объ­ек­та­ми на ней, вклад­ка­ми бра­у­зе­ра и всем, что с ним свя­за­но.

Python — более уни­вер­саль­ный язык, кото­рый рабо­та­ет не толь­ко с бра­у­зе­ра­ми, поэто­му для него нужен отдель­ный интер­пре­та­тор. Интер­пре­та­тор — это про­грам­ма, кото­рая берёт исход­ный код и выпол­ня­ет коман­ду за коман­дой. Вы може­те напи­сать отлич­ный код, но что­бы его испол­нить, вам все­гда нужен будет интер­пре­та­тор.

Есть два спо­со­ба запу­стить Python-код:

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

2. Исполь­зо­вать онлайн-сервисы, напри­мер, этот: onlinegdb.com/online_python_compiler. Рабо­та­ет точ­но так же — пише­те код, нажи­ма­е­те кноп­ку Run и смот­ри­те на резуль­тат.

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

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

Сей­час мы напи­шем тай­мер с огляд­кой на онлай­но­вый сер­вис. А отдель­но ещё рас­ска­жем об уста­нов­ке.

Исходный код на JavaScript

• спро­си­ли текст напо­ми­на­ния;
• выяс­ни­ли, через сколь­ко минут нуж­но напом­нить;
• поста­ви­ли тай­мер на нуж­ное вре­мя;
• в нём напи­са­ли, что когда вре­мя вый­дет, надо выве­сти сооб­ще­ние и поми­гать заго­лов­ком стра­ни­цы.

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

Простая реализация на Python

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

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

Что­бы сде­лать пау­зу, исполь­зу­ют коман­ду time.sleep(). Time — это назва­ние моду­ля, кото­рый мы под­клю­чи­ли, а sleep — функ­ция, кото­рая нахо­дит­ся внут­ри моду­ля. Её зада­ча — подо­ждать нуж­ное коли­че­ство секунд, а потом про­дол­жить выпол­не­ние про­грам­мы.

Что дальше: многозадачность и оптимизация

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

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

Источник статьи: http://thecode.media/python-time/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерфейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник статьи: http://thecode.media/timer/