html5超逼真带定时功能的电子数字时钟

在前面我们展示了一个使用jQuery和css3制作的数字时钟-使用jQuery和css3制作逼真的数字时钟效果。在这个版本中，我们将在电子数字时钟中集成HTML5 audio元素。

为了要实现定时闹钟功能，我们需要在jQuery版本的数字时钟的基础上做些调整：

• 我们需要给用户一个设置闹钟功能的界面。
• 没过一秒钟，我们都需要检查闹钟时间是否到了，如果闹钟时间到了，我们要播放audio音频文件并显示“Time’s up”对话框。

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 number输入框，最小值min为0。number输入框非常容易使用javascrit来验证，并且它们也支持移动设备的数字键盘。

接下来是HTML5 audio元素。在例子中包含了两种格式的audio文件。第一种是mp3格式的文件，第二种是ogg格式的文件。ogg格式文件仅仅在Firefox浏览器中需要，Firefox浏览器不支持mp3格式的音频文件。其它的浏览器都支持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 HTML5 audio API能很轻易的播放音频文件。

JAVASCRIPT

这里的jQuery文件是使用jQuery和css3制作逼真的数字时钟效果 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');
}
                

当计数器counter到达0，我们就应该播放音频文件和显示“Time is up”对话框。

最后要做的事情是设置“Set an alarm”对话框：

// 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行，我们使用了一个内置的validity属性，这个属性是现代浏览器的number input的一个内置属性。它用于告诉我们number input中的数字是否大于0（记住它有个最小值0）。