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

Идея

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

Нам нужно иметь способ, чтобы устанавливать и редактировать будильник. Это потребует какой-то диалогового окна с полями для установки времени сигнала будильника.

HTML

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

Код
<div class="overlay">
  <div id="alarm-dialog">
  <h2>Set alarm after</h2>
  <label class="hours">
  Часы
  <input type="number" value="0" min="0">
  </label>
  <label class="minutes">
  Минуты
  <input type="number" value="0" min="0">
  </label>
  <label class="seconds">
  Секунды
  <input type="number" value="0" min="0">
  </label>
  <div class="button-holder">
  <a id="alarm-set" class="button blue">Установить</a>
  <a id="alarm-clear" class="button red">Очистить</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">Закрыть</a>
  </div>
  </div>
</div>

Оба эти диалога скрыты с помощью CSS и показаны с JQuery FadeIn() метода, когда они необходимы. Другое дело, стоит отметить, что будильник использует HTML5 типы ввода номера с минимальным значением 0. Количество входов очень легко проверить с JavaScript, и они также поднимут числа с клавиатуры на мобильных устройствах.

Далее идет элемент HTML5 аудио. Он содержит адреса с двумя различными аудио форматами. Первый mp3 версию, а второй OGG. Формат OGG необходим только в Firefox, который еще не поддерживает воспроизведение mp3 из-за проблем с лицензированием. В значительной степени все другие браузеры, которые поддерживают HTML5 аудио также поддерживают mp3.

Код
<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 сообщает браузеру, что эти звуковые файлы должны быть загружены раньше времени, что сделает их незамедлительными как только мы решили проиграть их. Воспроизведение аудио файлов предельно прост благодаря JavaScript API HTML5 аудио.

JQuery

В этом разделе, мы будем расширять JQuery код цифровых часы для поддержки и проигрывания будильника. Я не буду объяснять этот код, мы писали его в прошлый раз, тут только новые дополнения.

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

Код
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).

  • FalleN

  • 4265

  • 1

  • 221

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!