本文实例讲述了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 sounddocument.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 wurdeaudioElement.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超逼真的时钟特效，希望大家可以喜欢。
更多相关内容：
