时钟Jquery html5特效代码分享（可设置闹钟并且语音提醒)

本文实例讲述了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' titleHTML5画布超逼真的模拟时钟特效/title link rel='样式表type=' text/CSS ' href=' CSS/normalize。CSS '/link rel='样式表type=' text/CSS ' href=' CSS/default。CSS ' link href=' http://字体。useso。com/CSS？family=PT Sans' rel='样式表type='text/css' link rel='样式表media=' screen ' href=' CSS/main。CSS '/！-[if IE]脚本src=' http :http://libs。useso。com/js/html 5 shiv/3.7/html 5 shiv。量滴js '/脚本！[endif]-/head body div class=' htmleaf-container ' div class=' container ' div id=' my clock '/div div id=' alarm 1 ' class=' alarm ' a href=' JavaScript : void(0)' id=' turnOffAlarm '关闭闹钟/a/div /div br/br/输入类型='text' id='altime '占位符=' hh :mm '/brbr a href=' JavaScript : void(0)' id=' set '设置闹钟/a/div脚本src=' http :3358 libs。useso。com/js/jquery/2。1 .1/jquery。量滴js ' type=' text/JavaScript '/script脚本窗口。jquery | |文档。write(' script src=' http : js/jquery-2。1 .1 .量滴js ' \/script ')/script脚本语言=' JavaScript '类型=' text/JavaScript ' src$(窗口)。resize(function(){ window。位置。reload()})；$(文档)。ready(function(){ var Audio元素=new Audio(')；//时钟插件构造函数$(“# my clock”).thooClock({ size:$(文档))。高度()/1.4，onAlarm :函数(){//发生的一切onar arm $(' # alarm 1 ').show()；alarmBackground(0)；//仅用于报警声音的音频元素文件。尸体。append child(AudioElement)；var canPlayType=音频元素。canPlayType(' audio/ogg ')；if(canplaytype。匹配(/也许|大概/I)){ AudioElement。src='警报。ogg '；} else { AudioElement。src='警报。MP3 '；}//erst abspielen wenn genug vom MP3 geladen wurde音频元素。addeventlistener('可以播放'，function(){ audio元素。loop=true音频元素。play()；}，false)；}，showNumerals:true，brandText:'THOOYORK '，brandText2:'Germany '，一秒钟：函数(){//应该每秒激发的回调}，//flarm : function(){ $(' # alarm 1 ')的危言耸听3360 ' 15:10 ' .hide()；audioElement。pause()；清除超时(int VaL)；$(“正文”).css(“”背景色，' # FCFCFC ')；} });});$(' # turnfalarm ').单击(function(){ $)。fn。托洛克。clear alarm()；});$('#set ').单击(function(){ var inp=$('#altime ').val()；$ .fn。托洛克。set alarm(InP)；});函数报警背景(y){ var color；if(y===1){ color=' # cc 0000 '；y=0；} else { color=' # fcfcy=1；} $(“正文”).css(“”背景色，颜色);int val=setTimeout(function(){ alarmBackground(y))；},100);}/脚本/正文/html以上就是为大家分享的jQuery超逼真的时钟特效，希望大家可以喜欢。