Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


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

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


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

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх