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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

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

<!-- Это название страницы, выводится в табе браузера-->
<title>Интервальный таймер</title>
<!-- это служебная информация для браузера, пока можно не вникать -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

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

<!-- подключаем фреймворк jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

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

<div class="app_form_block app_main app_timer ">
<!-- внутри этого блока мы и будем размещать все элементы -->
</div>

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

<!-- подключаем звуковые уведомления -->
   <audio id="audio_beep">
      <source src="s.mp3" type="audio/mp3" >
   </audio>

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

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

<!-- делаем форму на сайте, где будем выводить наши элементы -->
<form name="timer_form" id="timer_form">
  <!-- тут будут наш таймер и блок с настройками -->
</form>

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

<!-- пишем специальный заголовок страницы -->
<div class="block_row timer_types ">
  <span class="timer_types_btn active" id="Secret">Интервальный таймер
  </span>
</div>

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

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

Интерфейс

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

<div class="block_row  app_console">
  <!-- основной блок со всеми цифрами -->
</div>

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

<!-- блок, который отвечает за время тренировки -->
<span class="timer_interval_work">
  <!-- по умолчанию ставим время одного подхода 00 минут… -->
  <span class="timer_interval_nums minutes green" contenteditable="true">00
  </span>
  <!-- разделитель — двоеточие -->
  <span class="timer_sep">:
  </span>
  <!-- …и 25 секунд -->
  <span class="timer_interval_nums seconds green" contenteditable="true">25
  </span>
</span>

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

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

<!-- блок, который отвечает за количество подходов -->
<span class="timer_interval_count">
  <!-- какой сейчас идёт подход -->
  <span class="timer_interval_nums times">1
  </span>
  <!-- разделитель — косая черта -->
  <span class="timer_sep">/
  </span>
  <!-- и сколько подходов у нас всего -->
  <span class="timer_interval_nums all_times" contenteditable="true">10
  </span>
</span>
<!-- блок, который отвечает за время отдыха -->
<span class="timer_interval_rest">
  <!-- по умолчанию ставим время отдыха 0 минут… -->
  <span class="timer_interval_nums minutes red" contenteditable="true">00
  </span>
  <!-- разделитель — двоеточие -->
  <span class="timer_sep">:
  </span>
  <!-- …и 5 секунд -->
  <span class="timer_interval_nums seconds red" contenteditable="true">5
  </span>
</span>

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

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

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

<!-- большая цифровая панель -->
<div class="timer_panel_nums">
  <!-- минуты… -->
  <span class="timer_nums minutes">00</span>
  <span>:</span>
  <!-- …и секунды -->
  <span class="timer_nums seconds">00</span>
</div>

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

<!-- блок кнопок -->
<div class="block_row">
  <!-- Кнопка «Сброс» -->
  <input value="Сброс" name="timer_clear" id="timer_clear" class="timer_btn" type="button" />
  <!-- Кнопка «Старт» -->
  <input value="Старт" name="timer_run" id="timer_run" class="timer_btn run" type="button" />
  <!-- Кнопка «Пауза», в самом начале она скрыта -->
  <input value="Пауза" name="timer_pause" id="timer_pause" class="timer_btn pause hide" type="button" />
  <!-- закончился блок кнопок -->
</div>

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

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

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

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

body {
  text-align: center;
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/*настраиваем отступы в полях ввода цифр, там, где задаётся время тренировки, отдыха, и количество повторов*/
.app_form_block input[type="number"] {
  padding: 4px 4px;
}
/*задаём отступы у элементов*/
.app_main .block_row {
  padding: 1em 0.5em;
}
/*устанавливаем размер цифр для количества повторов, времени тренировки и отдыха */
.app_timer .app_console .timer_panel_info {
  font-size: 1.6em;
  line-height: 1.2em;
  letter-spacing: 0;
}
/*зелёный цвет*/
.green {
  color: #bff08e;
}
/*красный цвет*/
.red {
  color: #e56655;
}
/*задаём размер таймера*/
.app_timer .app_console .timer_panel_nums {
  font-size: 4.8em;
  line-height: 1.2em;
  margin-top: 50px;
}
/*учим браузер скрывать временно ненужные кнопки*/
.app_timer .timer_btn.hide,
.app_timer .timer_nums.hide,
.app_timer .timer_sep.hide {
  display: none;
}
/*задаём размер кнопок*/
.app_timer .timer_btn {
  border-color: #777;
  color: #777;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.8em;
  padding: 8px 12px;
  margin: 0 2px;
  min-width: 180px;
}
/*настраиваем, как изменится цвет кнопки, если провести по ней мышкой*/
.app_timer .timer_btn:hover {
  background-color: #777;
  color: #fff;
}
/*задаём размер кнопок*/
.app_timer .timer_btn.run,
.app_timer .timer_btn.pause {
  border-color: #5594e5;
  color: #5594e5;
  font-weight: 600;
}
/*настраиваем, как изменится цвет АКТИВНОЙ кнопки, если провести по ней мышкой*/
.app_timer .timer_btn.run:hover,
.app_timer .timer_btn.pause:hover {
  background-color: #5594e5;
  color: #fff;
}

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

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

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

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

<!-- подключаем наш код, который отвечает за правильную работу таймера -->
<script type="text/javascript" src="interval_timer_script.js" defer></script>

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

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

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

// переменная, которая отслеживает, сколько секунд прошло
var now_seconds = 0;
// var now_times = 0;
// тренировка начинается с отсчёта рабочего времени, сразу ставим этот режим
var interval_type = 'work';
// переменная для отсчёта интервалов
var intervalVariable;
// переменная, которая следит за количеством секунд в таймерах
var seconds_1 = 0;
// ставим начальные значения счётчиков минут и секунд
var timer_minutes = 0;
var timer_seconds = 0;

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

// подготовка звукового оповещения
function audio_change() {
  // находим аудиоэлемент на странице
  var audio = $('#audio_beep');
  // подключаем нужный файл со звуком. Файлов два, потому что разные браузеры играют разные форматы
  $('#audio_beep source[type="audio/ogg"]').attr('src', 's.ogg');
  $('#audio_beep source[type="audio/mp3"]').attr('src', 's.mp3');
  // ставим звук на паузу и подгружаем его
  audio[0].pause();
  audio[0].load();
}

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

// разбиваем секунды на часы, минуты и секунды
function secondsToTime(seconds) {
  var h = parseInt(seconds / 3600 % 24);
  var m = parseInt(seconds / 60 % 60);
  var s = parseInt(seconds % 60);
  return { 'hours': leadZero(parseInt(h)), 'minutes': leadZero(parseInt(m)), 'seconds': leadZero(parseInt(s)) };
}

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

function leadZero(num) {
  var s = "" + num;
  if (s.length < 2) {
    s = "0" + s;
  }
  return s;
}

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

// отображение времени на табло
function renderTimerNums(seconds) {
  var timer_nums = secondsToTime(seconds)
  $('.timer_nums.minutes').text(timer_nums.minutes);
  $('.timer_nums.seconds').text(timer_nums.seconds);
}

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

// функция, которая отвечает за смену времени на таймере
function timerTick(type, timer_params) {
  // увеличиваем количество прошедших секунд на единицу
  now_seconds++;
  // если идёт время тренировки
  if (interval_type == 'work') {
    // и ещё осталось время на тренировку
    if (timer_params.time_work - now_seconds > 0) {
      // показываем, сколько осталось времени
      renderTimerNums(timer_params.time_work - now_seconds);
    }
    // иначе, если тренировка закончилась
    else {
      // обнуляем табло
      renderTimerNums(0);
      // проигрываем звук уведомления
      $('#audio_beep')[0].play();
      // обнуляем секунды тренировки
      now_seconds = 0;
      // ставим режим «Отдых»
      interval_type = 'rest';
      // меняем цвет цифр на таймере
      $('.timer_panel_nums .timer_nums').removeClass('green');
      $('.timer_panel_nums .timer_nums').addClass('red');
    }
  }
  // если началось время отдыха
  else if (interval_type == 'rest') {
    // и оно ещё не закончилось
    if (timer_params.time_rest - now_seconds > 0) {
      // показываем оставшееся время
      renderTimerNums(timer_params.time_rest - now_seconds);
    }
    // а если всё-таки время отдыха закончилось
    else {
      // обнуляем табло
      renderTimerNums(0);
      // проигрываем звук уведомления
      $('#audio_beep')[0].play();
      // обнуляем секунды
      now_seconds = 0;
      // увеличиваем счётчик повторов на единицу
      now_times++;
      // если мы выполнили все повторы
      if (now_times > timer_params.interval_count) {
        // обновляем информацию на панели настроек
        $('.timer_interval_nums.times').text(timer_params.interval_count);
        $('#timer_pause').trigger('click');
        now_seconds = 0;
        $('.timer_panel_nums .timer_nums').removeClass('red');
      }
      // иначе, если количество пройденных повторов меньше, чем было задано
      else {
        // обновляем информацию на панели настроек
        $('.timer_interval_nums.times').text(now_times);
        $('.timer_panel_nums .timer_nums').removeClass('red');
        $('.timer_panel_nums .timer_nums').addClass('green');
      }
      // ставим после отдыха снова режим тренировки
      interval_type = 'work';
    }
  }
}

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

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

// обрабатываем нажатие на кнопку «Старт»
$('#timer_run').click(function () {
  // настраиваем аудио
  audio_change();
  // делаем кнопку «Старт» невидимой
  $(this).addClass('hide');
  // а кнопку «Пауза», наоборот, видимой
  $('#timer_pause').removeClass('hide');
  // записываем установленные минуты и секунды
  timer_minutes = $('.timer_nums.minutes').text();
  timer_seconds = $('.timer_nums.seconds').text();
  // переменная, которая будет хранить параметры интервального цикла
  var timer_params = {};
  // запускаем звуковое оповещение
  $('#audio_beep')[0].play();
  // устанавливаем размер тренировки...
  timer_params.time_work = $('.timer_interval_work .minutes').text() * 60 + $('.timer_interval_work .seconds').text() * 1;
  // ...отдыха,
  timer_params.time_rest = $('.timer_interval_rest .minutes').text() * 60 + $('.timer_interval_rest .seconds').text() * 1;
  // ...и количество повторений
  timer_params.interval_count = $('.timer_interval_count .all_times').text() * 1;
  // обновляем информацию о том, сколько подходов уже сделано
  now_times = $('.timer_interval_count .times').text() * 1;
  // если все тренировки прошли — начнём сначала
  if (now_times >= timer_params.interval_count) {
    now_times = 1;
    $('.timer_interval_count .times').text(now_times);
  }
  // если сейчас режим тренировки, то делаем табло зелёным и запоминаем количество секунд
  if (interval_type == 'work') {
    $('.timer_panel_nums .timer_nums').addClass('green');
    seconds_1 = timer_params.time_work;
  }
  // если сейчас режим отдыха, то делаем табло красным и запоминаем количество секунд
  else if (interval_type = 'rest') {
    $('.timer_panel_nums .timer_nums').addClass('red');
    seconds_1 = timer_params.time_rest;
  }
  // задаём интервал обновления — одна секунда
  intervalVariable = setInterval(timerTick, 1000, 'interval', timer_params);
  // выходим из функции
  return false;
});

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

// что будет, если мы нажмём на кнопку «Пауза»
$('#timer_pause').click(function (event, params) {
  // если кнопка сработала нормально
  if (params !== undefined) {
    // но аудиопараметры ещё не задавались
    if (params.audio === undefined) {
      // задаём параметры оповещения
      params.audio = 1;
    }
  }
  // иначе сразу задаём параметры звука
  else {
    params = { audio: 1 };
  }
  // после нажатия на кнопку «Пауза» делаем её невидимой
  $(this).addClass('hide');
  // а кнопку «Старт» — наоборот, видимой
  $('#timer_run').removeClass('hide');
  // останавливаем таймер
  clearInterval(intervalVariable);
  // если со звуком всё в порядке
  if (params.audio) {
    // проигрываем звуковое оповещение
    $('#audio_beep')[0].play();
  }
  // выходим из функции
  return false;
});

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

// что будет, если нажмём на кнопку «Сброс»
$('#timer_clear').click(function () {
  // имитируем нажатие на кнопку «Пауза», чтобы остановить таймер
  $('#timer_pause').trigger('click', { audio: 0 });
  // ставим режим тренировки
  interval_type = 'work';
  // убираем красный цвет на табло, которое там осталось от включения паузы
  $('.timer_panel_nums .timer_nums').removeClass('green red');
  // обнуляем табло
  renderTimerNums(0);
  // обнуляем значения служебных переменных
  now_seconds = 0;
  now_times = 0;
  // задаём начальное значение первого блока секунд
  seconds_1 = 25;
  // устанавливаем начальные значения времени тренировки, отдыха и количества повторов
  $('.timer_interval_work .minutes').text('00');
  $('.timer_interval_work .seconds').text('25');
  $('.timer_interval_rest .minutes').text('00');
  $('.timer_interval_rest .seconds').text('05');
  $('.timer_interval_count .times').text('1');
  $('.timer_interval_count .all_times').text('10');
  // выходим из функции
  return false;
});

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

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

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
hard