• Главная
• Видеоуроки
• PHP
• JavaScript
• CSS
• HTML
• Сервисы
• Статьи
• Оффтоп

• Главная
• ->
• Материалы
• ->
• Добавляем будильник к цифровым часам на CSS3 и jQuery

Добавляем будильник к цифровым часам на 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 с нуля:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх