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

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

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

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

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

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

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

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

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

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

    
language: HTML
<!DOCTYPE html>

<html>
<head>
</head>
<body>
</body>
</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: HTML
<!-- Это название страницы, выводится в табе браузера-->

<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, кото­рый упро­стит нам рабо­ту с тай­ме­ром и его ком­по­нен­та­ми:

    
language: HTML
<!-- подключаем фреймворк jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: HTML
<div class="app_form_block app_main app_timer ">

<!-- внутри этого блока мы и будем размещать все элементы -->

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: HTML
<!-- подключаем звуковые уведомления -->

   <audio id="audio_beep">

      <source src="s.mp3" type="audio/mp3" >

   </audio>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

    
language: HTML
<!-- делаем форму на сайте, где будем выводить наши элементы -->

<form name="timer_form" id="timer_form">

<!-- тут будут наш таймер и блок с настройками -->

</form>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: HTML
<!-- пишем специальный заголовок страницы -->

<div class="block_row timer_types ">

<span class="timer_types_btn active" id="Secret">Интервальный таймер

</span>

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

Интерфейс

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

    
language: HTML
<div class="block_row  app_console">

<!-- основной блок со всеми цифрами -->

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: HTML
<!-- блок, который отвечает за время тренировки -->

<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" озна­ча­ет, что этот кон­тент мож­но изме­нять, щёл­кая мыш­кой и вво­дя свои зна­че­ния.

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

    
language: HTML
<!-- блок, который отвечает за количество подходов -->

<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>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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


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

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

    
language: HTML
<!-- большая цифровая панель -->

<div class="timer_panel_nums">

 

   <!-- минуты… -->

   <span class="timer_nums minutes" >00</span>

   <span >:</span>

 

   <!-- …и секунды -->

   <span class="timer_nums seconds" >00</span>

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: HTML
<!-- блок кнопок -->

<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>. Выбе­рем вто­рой спо­соб и опре­де­лим все сти­ли пря­мо в этом же доку­мен­те:

    
language: CSS
<style type="text/css">

 

   /*задаём общие параметры для всей страницы: шрифт и отступы*/

   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;

   }

 

   </style>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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


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

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

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

    
language: HTML
<!-- подключаем наш код, который отвечает за правильную работу таймера -->

<script type="text/javascript" src="interval_timer_script.js" defer></script>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

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

    
language: JavaScript
// переменная, которая отслеживает, сколько секунд прошло

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 и под­клю­чать их к нашей стра­ни­це:

    
language: JavaScript
// подготовка звукового оповещения

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();

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: JavaScript
// разбиваем секунды на часы, минуты и секунды

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))};

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: JavaScript
function leadZero(num) {

   var s = "" + num;

   if (s.length < 2) {

       s = "0" + s ;

   }

   return s;

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: JavaScript
// отображение времени на табло

function renderTimerNums(seconds) {

   var timer_nums = secondsToTime(seconds)

   $('.timer_nums.minutes').text(timer_nums.minutes);

   $('.timer_nums.seconds').text(timer_nums.seconds);

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: JavaScript

// функция, которая отвечает за смену времени на таймере

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';

       }

   }

}

 


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

    
language: JavaScript
// обрабатываем нажатие на кнопку «Старт»

$('#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;

   });


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: JavaScript
// что будет, если мы нажмём на кнопку «Пауза»

$('#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;

   });


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: JavaScript
// что будет, если нажмём на кнопку «Сброс»

$('#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.

Ещё по теме