Добавление будильника
в цифровые часы
На прошлом уроке мы создали JQuery и CSS3 - цифровые часы . В этом обновлении мы добавим поддержку установки сигнала с использованием элемента HTML5 аудио.
ДЕМО СКАЧАТЬ
Идея
Идея состоит в том, что бы цифровые часы поддерживали
сигналы будильника, нам нужно добавить несколько важных функциональных
элементов в код с прошлого урока:
- Нам
нужно иметь способ, установки и редактирования сигнала. Для этого потребуется
диалог с полями для установки времени сигнала;
- Если
надо, мы будем воспроизводить небольшие аудио-файла и отображать
"Время вышло".
Эти особенности требуют внесения изменений в 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 аудио. Он содержит источник
теги с двумя различными аудио форматами. Первый mp3 версию звукового сигнала, а
второй OGG. Формат OGG необходим
только в браузере Firefox, который еще не поддерживает воспроизведение mp3
из-за проблем с лицензированием. В значительной степени все другие
браузеры, которые поддерживают HTML5 аудио, имеют поддержку 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>
|
Предварительная загрузка сообщает браузеру, что эти звуковые
файлы должны быть загружены раньше времени. Воспроизведение аудио файлов
предельно простое благодаря в JavaScript API HTML5 аудио .
JQuery
В этом разделе, мы будем расширять JQuery код цифровых часов
для поддержки воспроизведения сигнала. Я не буду объяснять этот код, мы
писали его в прошлый раз, только
новые дополнения.
Первое, что мы должны сделать, это определить число
переменных, важных для функционирования будильника:
активы / 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, то это будет означать, что мы
должны воспроизводить звуковой сигнал и
показать диалог "Время вышло".
Время вышло!
Последнее, что осталось сделать, это справиться с
"Установкой будильника" диалог и различные кнопки:
|
// 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();
});
|
Есть несколько интересных вещей об этом коде. Обратите
внимание, как я использую встроенные действия на 35 строчке, которая существует
для ввода номера в современных браузерах. Он говорит нам, является ли
содержимое поля ввода числа больше 0 (помните, что они имеют минимальное
значение 0).
Другой, что стоит отметить это код сигнала. Когда событие
происходит, мы рассчитываем оставшиеся часы, минуты и секунды сигнала будильника,
которые затем вставляются в поля ввода.
Наши цифровые часы с будильником готовы! Надеюсь,
что вам понравилось это краткое руководство и найдете его полезным в ваших собственных проектах.
ДЕМО СКАЧАТЬ
Ссылка на
источник
|
