本文实例讲述了jquery+html5可设置闹钟并且会语音提醒的时钟特效。分享给大家供大家参考。具体如下：这是一款基于jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码，超逼真的模拟时钟，最大的特点还可以语音提醒，感兴趣的小伙伴们快来研究研究。运行效果图：
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码如下
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5 canvas超逼真的模拟时钟特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="http://fonts.useso.com/css?family=pt+sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" media="screen" href="css/main.css"/>
<!--[if ie]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<div class="container">
<div id="myclock"></div>
<div id="alarm1" class="alarm"><a href="javascript:void(0)" id="turnoffalarm">关闭闹钟</a></div>
</div>
<br/><br/>
<input type="text" id="altime" placeholder="hh:mm"/><br><br>
<a href="javascript:void(0)" id="set">设置闹钟</a>
</div>
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jquery || document.write("<script src="js/jquery-2.1.1.min.js"></script>")</script>
<script language="javascript" type="text/javascript" src="js/jquery.thooclock.js"></script>
<script language="javascript">
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);
}
</script>
</body>
</html>
以上就是jquery+html5实现语音提醒的时钟效果的详细内容。