为了要实现定时闹钟功能，我们需要在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
我们要做的第一件事是为定时闹钟功能定义一个变量：
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 offvar 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 cleandialog.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）。
网盘下载密码：kfvz
