在前面我们展示了一个使用jQuery和css3制作的数字时钟-使用jQuery和css3制作逼真的数字时钟效果。在这个版本中,我们将在电子数字时钟中集成HTML5 audio元素。
为了要实现定时闹钟功能,我们需要在jQuery版本的数字时钟的基础上做些调整:
我们需要给用户一个设置闹钟功能的界面。
没过一秒钟,我们都需要检查闹钟时间是否到了,如果闹钟时间到了,我们要播放audio音频文件并显示“Time’s up”对话框。
HTML结构
我们需要两个对话框:一个用于设置/编辑闹钟定时功能;一个用于显示定时时间到了。
这两个对话框都使用CSS来将之隐藏,然后使用jQuery的fadeIn()方法在需要的时候显示它们。另一个需要注意的地方是数字时钟使用HTML5 number输入框,最小值min为0。number输入框非常容易使用javascrit来验证,并且它们也支持移动设备的数字键盘。
接下来是HTML5 audio元素。在例子中包含了两种格式的audio文件。第一种是mp3格式的文件,第二种是ogg格式的文件。ogg格式文件仅仅在Firefox浏览器中需要,Firefox浏览器不支持mp3格式的音频文件。其它的浏览器都支持mp3格式的音频文件。
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)。