html5语音闹钟代码,HTML5数字时钟之闹钟

想要在数字时钟时钟上扩展闹钟效果，需要做的有1、要有一个可以编辑设置闹钟响铃时间的界面；2、每秒钟侦听是否到了响铃时间，如果到了响铃时间则弹出提醒并播放响铃音频。

HTML

我们使用上篇文章使用jQuery和CSS3制作数字时钟(jQuery篇)的html结构，增加闹铃元素，增加设置闹铃的弹出界面，增加响铃提醒界面和audio音频元素。

设置闹钟触发时长

时

分

秒

设置

时间到!

关闭

jQuery

首先，我们利用CSS将设置时间和时间到的两个弹出层隐藏，具体请看demo中的css，这里不详述。然后当点击时钟旁边的闹铃图标时，显示弹出层#settime，显示时分秒设置表单，在点击“设置”按钮时，我们要对输入的时间数字进行验证，具体请看下面的代码：

$(function(){

定义初始计数变量

var alarm_counter = -1;

//调用设置时间界面

$('.alarm').click(function(){

$("#settime").show();

});

$('a.close').click(function(){

$("#settime").hide();

});

//设置时间

$("#alarm-set").click(function(){

var valid = true, after = 0,

to_seconds = [3600, 60, 1];

$("#settime").find('input').each(function(i){

if(this.validity && !this.validity.valid){

valid = false;

this.focus();

return false;

}

after += to_seconds[i] * parseInt(parseInt(this.value));

});

if(!valid){

alert('请输入有效数字!');

return;

}

if(after < 1){

alert('请输入有效的时间!');

return;

}

//设置计数变量值

alarm_counter = after;

$("#settime").hide();

});

$("#timeisup").click(function(){

$("#timeisup").fadeOut();

$("#settime").find('input').attr('value','0');

});

});

然后我们要在每秒执行update_time()函数中做判断，判断计数变量alarm_counter的值，如果alarm_counter的值大于0，说明还没到响铃时间，这个时候计数变量减1，闹铃图标样式处于active状态；如果alarm_counter刚好等于0，说明到了响铃时间，这时弹出“时间到”提醒层，并播放音频；如果alarm_counter小于0，则说明响铃处于未工作状态。

$(function(){

...

// 让时钟跑起来

(function update_time(){

...

//闹钟

var alarm = $(".alarm");

if(alarm_counter > 0){

alarm_counter--;

alarm.addClass('active');

}

else if(alarm_counter == 0){

$("#timeisup").fadeIn();

//在支持html audio的浏览器上播放声音

try{

$("#ring")[0].play();

}

catch(e){}

alarm_counter--;

alarm.removeClass('active');

}

else{

alarm.removeClass('active');

}

// 每秒钟运行一次

setTimeout(update_time, 1000);

})();

});

将以上代码好好整理，就可以看到demo中的效果，你也可以直接下载DEMO中的源码来学习，注意音频audio元素需要支持html5的浏览器才会有效果。