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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
javascript常用的方法分享
Jul 01 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP实现的日历功能示例
2018/09/01 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
js charAt的使用示例
2014/02/18 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
javascript 缓冲运动框架的实现
2017/09/29 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
财务科科长岗位职责
2014/03/10 职场文书
大学开学计划书
2014/04/30 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang