Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Добавляем будильник к цифровым часам на CSS3 и jQuery
 |
 |
Исходники |
Пример |
В прошлом материале мы создали цифровые часы на CSS3 и jQuery. В этой дополнительной статье давайте разберемся с тем, как добавить в эти часы функцию самого настоящего будильника с помощью элемента audio в 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() в тот момент, когда это нужно.
Следующий момент, который стоит отметить - это то, что в окне для ввода времени используется поле для ввода чисел с минимальным значением равным нулю, а для числовых полей очень удобно и легко производить валидацию с помощью JavaScript (об этом чуть позже).
<audio id="alarm-ring" preload>
<source src="assets/audio/ticktac.mp3" type="audio/mpeg" />
<source src="assets/audio/ticktac.ogg" type="audio/ogg" />
</audio>
Далее - это элемент audio в HTML5. В нем есть тэги для указания адресов до двух аудиофайлов. Первый файл - это mp3-версия сигнала, второй - ogg-версия. Формат ogg нужнен только для Firefox, который не поддерживает воспроизведение mp3 из-за вопросов лицензирования.
Хорошо, что все остальные браузеры, понимающие тэг audio, также поддерживают воспроизведение mp3-файлов.
Атрибут preload дает браузеру инструкцию, что аудиофайлы должны быть загружены заранее, чтобы далее к ним можно было получить доступ мгновенно (в противном случае мы можем столкнуться с задержкой сигнала будильника при первом срабатывании).
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();
// Здесь содержится число секунд
// до срабатывания будильника
var alarm_counter = -1;
Затем, на каждом тике функции update_time() нам нужно проверять, нет ли у нас ожидающего исполнения сигнала будильника.
// Есть ли установленный будильник?
if(alarm_counter > 0){
// Уменьшаем значение счетчика на 1 секунду
alarm_counter--;
// Активируем иконку будильника
alarm.addClass('active');
}
else if(alarm_counter == 0){
time_is_up.fadeIn();
// Проиграть звук будильника (номер не пройдет
// в браузерах не поддерживающих аудио HTML5)
try{
$('#alarm-ring')[0].play();
}
catch(e){}
alarm_counter--;
alarm.removeClass('active');
}
else{
// "Сброс" будильника
alarm.removeClass('active');
}
Когда счетчик достигает значения "0", это означает, что нам нужно проиграть звук и показать окно "Время вышло!".
Обратите внимание, что хотя я выбираю с помощью jQuery элемент #alarm-ring, я получаю доступ к первому DOM-элементу в наборе, обращаясь таким образом к JavaScript-методу play(), который доступен для элементов типа audio.
Последний момент, который нужно реализовать - это обработка окна с установкой будильника и различные кнопки:
// Обработка установки и удаления будильника
$('.alarm-button').click(function(){
// Показ окна
dialog.trigger('show');
});
dialog.find('.close').click(function(){
dialog.trigger('hide')
});
dialog.click(function(e){
// Прячем окно по клику
if($(e.target).is('.overlay')){
dialog.trigger('hide');
}
});
alarm_set.click(function(){
var valid = true, after = 0,
to_seconds = [3600, 60, 1];
dialog.find('input').each(function(i){
// Используем свойство validity в браузерах с поддержкой HTML5
if(this.validity && !this.validity.valid){
// Поле содержит что-то отличное от числа
// или число меньше минимально возможного значения
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');
});
// Пользовательские события
dialog.on('hide',function(){
dialog.fadeOut();
}).on('show',function(){
// Подсчитываем, как много времени осталось до срабатывания будильника.
var hours = 0, minutes = 0, seconds = 0, tmp = 0;
if(alarm_counter > 0){
// Будильник установлен, считаем оставшееся время
tmp = alarm_counter;
hours = Math.floor(tmp/3600);
tmp = tmp%3600;
minutes = Math.floor(tmp/60);
tmp = tmp%60;
seconds = tmp;
}
// Обновляем поля input
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();
В этом коде есть еще пара нтересных моментов. Обратите внимание на то, как я использую встроенное свойство валидации, которое существует для полей input с типом number в современных браузерах. Оно призвано проверять, чтобы введенное значение было числом больше нуля.
Еще один момент: когда отрабатывает событие show, мы подсчитываем оставшиеся часы, минуты и секунды до сигнала, которые затем подставляются в поля input.
На этом доработку наших часов можно считать законченной! Надеюсь, что вам понравилось это руководство и вы найдете, где применить показанный пример на практике.
По материалам tutorialzine.com
Перевод: Дмитрий Науменко
P.S. Хотите круто программировать и не только? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
