上周我们创建了一个用jQuery和CSS3制作的数字时钟 ，在本次更新中，我们将使用HTML5的audio元素来添加对闹铃设置的支持。

DEMODOWNLOAD

思路

为了扩展数字时钟对闹铃的支持，我们需要在上周的代码中添加一些关键的部分方法：

• 我们需要一种方法来让人们设置和调整闹铃，这将需要一些带设置闹铃时间设置区域之类的对话框；
• 每一秒，我们需要检查闹铃是否应该响铃，如果是，我们就播放一小段音频文件并且提示“时间到”的对话框。
  这些特性要修改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()方法来显示。另一个值得指出的是闹铃对话框使用HTML5的带 min 值为0的 number 输入框，数字输入框是非常容易用JavaScript来验证的并且在移动设置上也会调出数字键盘。

接下来是HTML5的 audio 元素，它带有两个不同的音频格式，第一个是mp3版本的警报声音，第二个是ogg格式，ogg格式仅在因许可证问题而还不支持mp3播放的Firefox下才需要。还好几乎所有其他支持HTML5音频的浏览器也支持mp3。

index.html

<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 （下一节中会有更多介绍）。

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();

// 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时，这意味着我们将播放闹铃声音并显示“时间到”的对话框。我用jQuery选择了 #alarm-ring 声音元素，并访问集合中的第一个DOM元素以用于调用在声音元素上可用的JavaScript的 play()方法。

TIme’s up!

最后剩下要做的，是要处理“设置闹铃”的对话框和不同的的按钮：

// 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 （在流行浏览器的一个为数字输入框存在）属性的。 它告诉我们是否输入域的内容是一个比0大的数字（记住它们的最小值为0）。

另外一件值得指出的事是闹铃对话框的代码是用自定义事件组织的，当 show 事件触发时，我们计算闹铃的剩余小时，分和秒，并填充到输入框中。

至此我们带闹种的漂亮的数字时钟就完成了！ 我希望你喜欢这个快速教程并方便的用于你自己的项目。

E文链接：http://tutorialzine.com/2013/06/digital-clock-adding-alarms/