时钟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">
 <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超逼真的时钟特效，希望大家可以喜欢。

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

waterv

相关推荐

使用AlermManager设置闹钟

Android 实用闹钟开发过程记

win10预览版14972将允许第三方闹钟绕过免打扰时间功能限制

win10系统自带闹钟怎么来提醒?

Win10时钟应用如何批量快速删除无效闹钟

Win10系统自带秒表在哪如何打开使用(适合运动或考试)

Win10系统内置的闹钟设置过程图解

Win7如何设置闹钟？电脑闹钟设置图文教程

win7系统电脑中闹钟设置方法

Android闹钟设置的解决方案

Android Alarm闹钟

Android设置闹钟的基本思路是这样的

闹钟功能和消息栏通知功能

一个没有停止的android闹钟，一旦开始就要把歌唱完 .

Android 闹钟机制实现定时任务

Android闹钟最终版【android源码闹钟解析】

AlarmManager类的应用（实现闹钟功能）

关于闹钟源码中是如何设置两个闹钟的问题

Android的闹钟

ADROID 2.1 架构解析 6 闹钟

30行代码，python与树莓派结合打造语音闹钟+19年python教程分享

关于Android中设置闹钟的相对比较完善的解决方案

今日芯声 | 可口可乐也能做闹钟？还有更惊喜吗？

Linux模拟实现sleep函数

Android 结合AlarmManager浅谈Intent和PendingIntent

Android闹钟设置的解决方案

用HTML+JS实现Android闹钟功能附Alarm代码分享

牛牛的闹钟