本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效。共享给大家供大家参考。详细如下：

这是一个使用Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码，超逼真的模拟时钟，最大的特点还可以语音提醒，感兴趣的小伙伴们快来研究研究。

运行效果图：-------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览项目。

为大家共享的Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码如下

HTML5 canvas超逼真的模拟时钟特效

var intVal, myclock;

$(window).resize(function(){

window.location.reload()

});

$(document).ready(function(){

var audioElement = new Audio("");

//clock plugin constructor

$('#myclock').thooClock({

size:$(document).height()/1.4,

onAlarm:function(){

//all that happens onAlarm

$('#alarm1').show();

alarmBackground(0);

//audio element just for alarm sound

document.body.appendChild(audioElement);

var canPlayType = audioElement.canPlayType("audio/ogg");

if(canPlayType.match(/maybe|probably/i)) {

audioElement.src = 'alarm.ogg';

} else {

audioElement.src = 'alarm.mp3';

}

// erst abspielen wenn genug vom mp3 geladen wurde

audioElement.addEventListener('canplay', function() {

audioElement.loop = true;

audioElement.play();

}, false);

},

showNumerals:true,

brandText:'THOOYORK',

brandText2:'Germany',

onEverySecond:function(){

//callback that should be fired every second

},

//alarmTime:'15:10',

offAlarm:function(){

$('#alarm1').hide();

audioElement.pause();

clearTimeout(intVal);

$('body').css('background-color','#FCFCFC');

}

});

});

$('#turnOffAlarm').click(function(){

$.fn.thooClock.clearAlarm();

});

$('#set').click(function(){

var inp = $('#altime').val();

$.fn.thooClock.setAlarm(inp);

});

function alarmBackground(y){

var color;

if(y===1){

color = '#CC0000';

y=0;

}

else{

color = '#FCFCFC';

y+=1;

}

$('body').css('background-color',color);

intVal = setTimeout(function(){alarmBackground(y);},100);

}

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持乐购源码。