html5语音闹钟代码,HTML5数字时钟之闹钟
想要在数字时钟时钟上扩展闹钟效果,需要做的有1、要有一个可以编辑设置闹钟响铃时间的界面;2、每秒钟侦听是否到了响铃时间,如果到了响铃时间则弹出提醒并播放响铃音频。
HTML
我们使用上篇文章使用jQuery和CSS3制作数字时钟(jQuery篇)的html结构,增加闹铃元素,增加设置闹铃的弹出界面,增加响铃提醒界面和audio音频元素。
设置闹钟触发时长
时
分
秒
设置
时间到!
关闭
jQuery
首先,我们利用CSS将设置时间和时间到的两个弹出层隐藏,具体请看demo中的css,这里不详述。然后当点击时钟旁边的闹铃图标时,显示弹出层#settime,显示时分秒设置表单,在点击“设置”按钮时,我们要对输入的时间数字进行验证,具体请看下面的代码:
$(function(){
定义初始计数变量
var alarm_counter = -1;
//调用设置时间界面
$('.alarm').click(function(){
$("#settime").show();
});
$('a.close').click(function(){
$("#settime").hide();
});
//设置时间
$("#alarm-set").click(function(){
var valid = true, after = 0,
to_seconds = [3600, 60, 1];
$("#settime").find('input').each(function(i){
if(this.validity && !this.validity.valid){
valid = false;
this.focus();
return false;
}
after += to_seconds[i] * parseInt(parseInt(this.value));
});
if(!valid){
alert('请输入有效数字!');
return;
}
if(after < 1){
alert('请输入有效的时间!');
return;
}
//设置计数变量值
alarm_counter = after;
$("#settime").hide();
});
$("#timeisup").click(function(){
$("#timeisup").fadeOut();
$("#settime").find('input').attr('value','0');
});
});
然后我们要在每秒执行update_time()函数中做判断,判断计数变量alarm_counter的值,如果alarm_counter的值大于0,说明还没到响铃时间,这个时候计数变量减1,闹铃图标样式处于active状态;如果alarm_counter刚好等于0,说明到了响铃时间,这时弹出“时间到”提醒层,并播放音频;如果alarm_counter小于0,则说明响铃处于未工作状态。
$(function(){
...
// 让时钟跑起来
(function update_time(){
...
//闹钟
var alarm = $(".alarm");
if(alarm_counter > 0){
alarm_counter--;
alarm.addClass('active');
}
else if(alarm_counter == 0){
$("#timeisup").fadeIn();
//在支持html audio的浏览器上播放声音
try{
$("#ring")[0].play();
}
catch(e){}
alarm_counter--;
alarm.removeClass('active');
}
else{
alarm.removeClass('active');
}
// 每秒钟运行一次
setTimeout(update_time, 1000);
})();
});
将以上代码好好整理,就可以看到demo中的效果,你也可以直接下载DEMO中的源码来学习,注意音频audio元素需要支持html5的浏览器才会有效果。
html5语音闹钟代码,HTML5数字时钟之闹钟相关推荐
- html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作 数字时钟样式.html5 canvas数字时钟代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
- html5语音框架,使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...
- html5页面弹幕代码,html5新年许愿文字弹幕代码
特效描述:html5 新年许愿 文字弹幕代码.html5文字弹幕 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 HTML5手机视频弹幕文字评论代码 #audio_btn{ posit ...
- html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图 各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到 ...
- html5纪念日期代码,HTML5适合的情人节礼物有纪念日期功能
前言 利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字 ...
- html5外链代码,html5关于外链嵌入页面通信问题
这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学 ...
- html5进度条代码,html5简单进度条效(progressbar)
[实例简介] [实例截图] [核心代码] 一个html5实现的简单进度条效果 var i = 0; var res = 0; var context = null; var total_width = ...
- HTML5隐藏图片代码,HTML5终极备忘大全(图片版+文字版)
一.前言兼图片备忘 下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆 ...
- html5 3d全景代码,HTML5教程 三维全景详解
本篇教程探讨了HTML5教程 三维全景详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 准备: 1.一张或多张全景图片素材 2.pano2VR软件,链接: ...
最新文章
- Springboot 打包时引入外部jar
- Gh0st 3.6 存在的BUG及修改方法(收集整理)
- iOS-QQ临时对话、QQ群申请跳转
- winform Tab键循序 小发现
- 2020下半年新机最新消息_提前剧透 2020 年下半年五大新机
- tinymce引入后未显示_讷河华宁电子QJZ1-1600/3300主控制及显示总成101系统用
- eclipse和maven
- CSS样式表操作及选择器定义
- .NET Framework 托管与非托管代码
- fastjson转换对象时出错,$ref: $.data.list[0].xxxx
- 古代气候暖和时,雪山雪线如何变化
- 悟透LoadRunner - 调用外部DLL的点点滴滴
- 刚读博士想退学?如何避免博士毕业不了?
- 帆软 大屏BI模板(含报表滚动,图表联动等)下载
- 差分方程MATLAB求冲激响应,用matlab求解某已知的差分方程的单位冲激响应全过程...
- 输出字符串中匹配最多的括号数
- 高性能国产化信号处理平台国产DSP+FPGA+AI NPU安路紫光方案
- Redis安装(Windows 最新版本redis 5.0.9,以及redis 4.0)
- 给你的数据加上杠杆:文本增强技术的研究进展及应用实践
- 【递归与递推】诸侯安置
热门文章
- 湖南工业大学计算机专硕调剂,2020考研调剂:湖南工业大学生物信息实验室2020考研调剂信息...
- Java里面长什么样,Java对象在JVM中长啥样
- 新疆大学c语言期末考试题库,2016年新疆师范大学教育科学学院C语言程序设计考研复试题库...
- hibernate配置多数据源
- Java停车场管理系统使用栈和队列任务台程序
- 基于JAVA+SpringMVC+Mybatis+MYSQL的疫情防控物业管理系统
- android对错图标,Android Studio Gradle图标错误,清单合并
- 软件工程师工作内容和从业要求
- 【转】C#事件和委托的理解
- NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)