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 表单验证扩展(四)
Oct 20 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
js中的this关键字详解
Sep 25 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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你的验证码安全码?
2007/01/02 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
php intval函数用法总结
2019/04/14 PHP
Jquery 扩展方法
2010/05/06 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python实现简单温度转换的方法
2015/03/13 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
用python制作游戏外挂
2018/01/04 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
少儿节目主持串词
2014/04/02 职场文书
团代会主持词
2014/04/02 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
五年级学生期末评语
2014/12/26 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
离婚协议书格式范本
2016/03/18 职场文书