html5超逼真带定时功能的电子数字时钟

2019-10-10 15:44:57 作者: 大梦 浏览: 62 [百度已收录] [搜狗已收录] [360已收录]

简要教程

在前面我们展示了一个使用jQuery和css3制作的数字时钟-使用jQuery和css3制作逼真的数字时钟效果。在这个版本中,我们将在电子数字时钟中集成HTML5 audio元素。

为了要实现定时闹钟功能,我们需要在jQuery版本的数字时钟的基础上做些调整:

  • 我们需要给用户一个设置闹钟功能的界面。
  • 没过一秒钟,我们都需要检查闹钟时间是否到了,如果闹钟时间到了,我们要播放audio音频文件并显示“Time’s up”对话框。

设置数字时钟的定时功能-1

HTML结构

我们需要两个对话框:一个用于设置/编辑闹钟定时功能;一个用于显示定时时间到了。

这两个对话框都使用CSS来将之隐藏,然后使用jQuery的fadeIn()方法在需要的时候显示它们。另一个需要注意的地方是数字时钟使用HTML5 number输入框,最小值min为0。number输入框非常容易使用javascrit来验证,并且它们也支持移动设备的数字键盘。

接下来是HTML5 audio元素。在例子中包含了两种格式的audio文件。第一种是mp3格式的文件,第二种是ogg格式的文件。ogg格式文件仅仅在Firefox浏览器中需要,Firefox浏览器不支持mp3格式的音频文件。其它的浏览器都支持mp3格式的音频文件。

preload 属性告诉浏览器要预先下载音频文件,这将使得在设备在播放时音频文件能立刻生效。我们使用JavaScript HTML5 audio API能很轻易的播放音频文件。

JAVASCRIPT

这里的jQuery文件是使用jQuery和css3制作逼真的数字时钟效果 jQuery文件的一些补充。

我们要做的第一件事是为定时闹钟功能定义一个变量:

接下来,我们要在update_time()中检查闹钟的定时时间是否到了:

当计数器counter到达0,我们就应该播放音频文件和显示“Time is up”对话框。

设置数字时钟的定时功能-2

最后要做的事情是设置“Set an alarm”对话框:

注意代码的35行,我们使用了一个内置的validity属性,这个属性是现代浏览器的number input的一个内置属性。它用于告诉我们number input中的数字是否大于0(记住它有个最小值0)。

版权免责声明 1、本网站名称:罗网云集-支付之家!
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站Potato土豆群:请先加好友啦你进群:dizhus —potato是一款不用翻墙的聊天软件
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的