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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
js+canvas绘制图形验证码
Sep 21 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jQuery技巧总结
2011/01/01 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python实现ping的方法
2015/07/06 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python里glob模块知识点总结
2021/01/05 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
2014年中秋寄语
2014/08/11 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL