—»     —»   Добавляем будильник в цифровые часы
  Раздел: Руководства   Нет комментариев  

Добавляем будильник в цифровые часы



Добавляем будильник в цифровые часы

Несколько дней тому назад мы занимались разработкой цифровых часов на jQuery и CSS3. Сегодня же нам хочется продолжить эту серию статей, и рассказать вам о том, как реализовать в них функцию будильника при помощи HTML5-элемента Audio.

Идея

Чтобы дополнить наши цифровые часы поддержкой будильника, нам нужно добавить несколько важнейших моментов функционала в код, который у нас получился в предыдущей статье:

* нам нужно, чтобы люди имели возможность устанавливать и редактировать будильник. Для этого понадобится диалоговое окно с полями, которые позволяют выставлять время будильника.
* каждую секунду нам нужно проверять, не пришло ли время для оповещения. Если да, то мы запускаем небольшой аудио-файл и отображаем диалоговое окно «Time’s up».

Для этих свойств нам нужно будет изменить HTML, CSS и jQuery. Давайте приступим!

Добавляем будильник в цифровые часы

HTML

У нас будет два диалоговых окна – одно для настройки и редактирования будильника, а второе будет отображаться при наступлении установленного времени.

Index.html

<div class="overlay">

<div id="alarm-dialog">

<h2>Set alarm after</h2>

<label class="hours">
Hours
<input type="number" value="0" min="0" />
</label>

<label class="minutes">
Minutes
<input type="number" value="0" min="0" />
</label>

<label class="seconds">
Seconds
<input type="number" value="0" min="0" />
</label>

<div class="button-holder">
<a id="alarm-set" class="button blue">Set</a>
<a id="alarm-clear" class="button red">Clear</a>
</div>

<a class="close"></a>

</div>

</div>

<div class="overlay">

<div id="time-is-up">

<h2>Time's up!</h2>

<div class="button-holder">
<a class="button blue">Close</a>
</div>

</div>

</div>

Оба эти диалоговых окна скрыты при помощи CSS, и отображаются при помощи jQuery-метода fadeIn() при необходимости. Также следует отметить, что диалоговое окно будильника использует HTML5-типы полей ввода с минимальным значением равным 0. Поля ввода цифр очень просто перепроверить при помощи javascript (подробнее об этом можно узнать в следующем разделе), и они также позволяют вывести цифровую клавиатуру на мобильных устройствах.

Далее следует HTML5-элемент audio. Он содержит теги source с двумя разными источниками аудио. Первый источник представляет собой mp3, а второй – ogg. Ogg-формат нужен только для Firefox, который не поддерживает воспроизведение mp3 ввиду нестыковок в лицензионном соглашением. Остальные же браузеры, поддерживающие HTML5 Audio, способны воспроизводить mp3.

Index.html

<audio id="alarm-ring" preload>
<source src="assets/audio/ticktac.mp3" type="audio/mpeg" />
<source src="assets/audio/ticktac.ogg" type="audio/ogg" />
</audio>

Атрибут preload сообщает браузеру, что эти звуковые файлы должны быть скачаны заранее, чтобы сразу же иметь к ним доступ, когда будет необходимо воспроизвести звук будильника (в противном случае, при первом же испытании будильника, звук задержится до тех пор, пока не будет скачан звуковой файл). Благодаря API HTML5 Audio на javascript мы можем невероятно простым образом воспроизводить аудиофайлы (подробнее об этом в следующем разделе).

jQuery

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

Первое, что нам нужно сделать, это определить количество переменных, необходимых для функционирования будильника:

assets/js/script.js

var dialog = $('#alarm-dialog').parent(),
alarm_set = $('#alarm-set'),
alarm_clear = $('#alarm-clear'),
time_is_up = $('#time-is-up').parent();

// This will hold the number of seconds left
// until the alarm should go off
var alarm_counter = -1;

Далее нам нужно проверить, если в ожидании функции update_time() установленный будильник.

// Is there an alarm set?

if(alarm_counter > 0){

// Decrement the counter with one second
alarm_counter--;

// Activate the alarm icon
alarm.addClass('active');
}
else if(alarm_counter == 0){

time_is_up.fadeIn();

// Play the alarm sound. This will fail
// in browsers which don't support HTML5 audio

try{
$('#alarm-ring')[0].play();
}
catch(e){}

alarm_counter--;
alarm.removeClass('active');
}
else{
// The alarm has been cleared
alarm.removeClass('active');
}

Когда счетчик доходит до 0, это значит, что пора воспроизводить звук и показывать диалоговое окно. Обратите внимание, что, несмотря на то, что мы указываем элемент audio #alarm-ring при помощи jQuery, мы также осуществляем доступ к первому DOM-элементу внутри коллекции, и получаем доступ к javascript-методу play(), доступному в элементах audio.

Добавляем будильник в цифровые часы

Последнее, что нам осталось сделать, это разобраться с диалоговым окном «Set an alarm» и несколькими кнопками:

// Handle setting and clearing alamrs

$('.alarm-button').click(function(){

// Show the dialog
dialog.trigger('show');

});

dialog.find('.close').click(function(){
dialog.trigger('hide')
});

dialog.click(function(e){

// When the overlay is clicked,
// hide the dialog.

if($(e.target).is('.overlay')){
// This check is need to prevent
// bubbled up events from hiding the dialog
dialog.trigger('hide');
}
});

alarm_set.click(function(){

var valid = true, after = 0,
to_seconds = [3600, 60, 1];

dialog.find('input').each(function(i){

// Using the validity property in HTML5-enabled browsers:

if(this.validity && !this.validity.valid){

// The input field contains something other than a digit,
// or a number less than the min value

valid = false;
this.focus();

return false;
}

after += to_seconds[i] * parseInt(parseInt(this.value));
});

if(!valid){
alert('Please enter a valid number!');
return;
}

if(after < 1){
alert('Please choose a time in the future!');
return;
}

alarm_counter = after;
dialog.trigger('hide');
});

alarm_clear.click(function(){
alarm_counter = -1;

dialog.trigger('hide');
});

// Custom events to keep the code clean
dialog.on('hide',function(){

dialog.fadeOut();

}).on('show',function(){

// Calculate how much time is left for the alarm to go off.

var hours = 0, minutes = 0, seconds = 0, tmp = 0;

if(alarm_counter > 0){

// There is an alarm set, calculate the remaining time

tmp = alarm_counter;

hours = Math.floor(tmp/3600);
tmp = tmp%3600;

minutes = Math.floor(tmp/60);
tmp = tmp%60;

seconds = tmp;
}

// Update the input fields
dialog.find('input').eq(0).val(hours).end().eq(1).val(minutes).end().eq(2).val(seconds);

dialog.fadeIn();

});

time_is_up.click(function(){
time_is_up.fadeOut();
});

В этом коде есть парочка интересных мест. Обратите внимание на то, как мы используем встроенное свойство “validity” в 35-ой строке, которая доступна к использованию на полях ввода цифр в современных браузерах. Оно сообщает нам, составляет ли содержимое поля ввода больше 0 (помните, что 0 – это минимальное значение).

Также стоит обратить внимание на то, каким образом код для диалогового окна будильника организован при помощи пользовательских событий. Когда ‘show’-событие запущено, мы высчитываем оставшиеся часы, минуты и секунды до будильника, которые затем вносятся в поле ввода.

На этом наши милые цифровые часы с будильником готовы! Надеемся, что вам понравилось данное руководство, и окажется вам полезным в последующих проектах!

Демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 4613   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930