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 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 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
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
web性能优化之javascript性能调优
2012/12/28 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python 中的with关键字使用详解
2016/09/11 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python 字符串池化的前提
2020/07/03 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
小学教师的个人自我鉴定
2013/10/24 职场文书
理发店策划方案
2014/06/05 职场文书
公司市场部岗位职责
2015/04/15 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
bose降噪耳机音能消除人声吗
2022/04/19 数码科技