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

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

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

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

Наш сце­на­рий рабо­ты такой: поль­зо­ва­тель зада­ёт вре­мя одно­го упраж­не­ния и пере­ры­ва после него, а потом ука­зы­ва­ет, сколь­ко раз он хочет выпол­нить это упраж­не­ние с пере­ры­вом. Напри­мер, сто­ять в план­ке на про­тя­же­нии мину­ты, потом отды­хать 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.