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>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery制作图片时钟特效
一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function
-
jquery制作LED 时钟特效
以下是HTML文件源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title
-
jQuery CSS3相结合实现时钟插件
废话不多说了,直接给大家贴代码了. 效果图如下所示: 简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></scri
-
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
先给大家展示效果图,感兴趣的朋友可以下载源码哦. 效果演示 源码下载 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. HTML 我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中. <div id="clock" class="light"> <div class=&
-
jquery模拟LCD 时钟的html文件源代码
以下是HTML文件源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title
-
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示 源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></
-
jQuery超酷平面式时钟效果代码分享
本文实例讲述了jQuery超酷平面式时钟效果代码.分享给大家供大家参考.具体如下: jQuery制作的超酷平面式时钟效果,把日期和时间通过横向刻度条展现,经测试效果非常酷,是一个很不错的学习实例. 这里我们还要提到之前实现的另一个特别新颖的时间显示样式:js实现温度计时间样式,两者都完全突破了传统的时钟概念,感兴趣的各位可不要错过了哈. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以
-
jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表 代码: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
-
jQuery实现的电子时钟效果完整示例
本文实例讲述了jQuery实现的电子时钟效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net jQuery电子时钟</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <bod
-
jQuery+css实现的时钟效果(兼容各浏览器)
本文实例讲述了jQuery+css实现的时钟效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 这里没有做太多的修饰,简单的实现了一下功能,另外,用的是js的setTimeout方法,当时间长了之后,会有一定的延时,建议,在每隔多少分钟执行一次时钟校准!哈哈,都有误差的嘛,反正我是没给你校. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.