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


Posted in Javascript onMarch 30, 2020

本文实例讲述了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时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 #Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 #Javascript
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
PHP新手上路(六)
2006/10/09 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
php判断目录存在的简单方法
2019/09/26 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python将音频进行变速的操作方法
2020/04/08 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
小学生手册家长评语
2014/04/16 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
关于EntityWrapper的in用法
2022/03/22 Java/Android