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

前端技术 2023/09/05 JavaScript

本文实例讲述了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超逼真的时钟特效，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/12202

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案