• 隐藏侧边栏
  • 展开分类目录
  • 关注微信公众号
  • 我的GitHub
  • QQ:1753970025
Chen Jiehua

简易的倒计时 

这两天折腾着实现一个带有声音的倒计时,效果虽简单,不过还是挺有趣的……

最终实现的效果:

timeticker

timeticker

环形进度条

本着不重复造轮子的原则,直接采用现成的 JS插件 progressbar.js,几行代码直接实现:

然后就可以很方便的控制进度了:

倒计时

要实现倒计时的功能,我们可以通过  setInterval() 来实现

音效

我们要实现开始、结束、倒计时过程的声音,声音可以通过 HTML 的 audio 来实现:

暂停/播放

倒计时过程中如果要暂停,我们可以使用 clearInterval() 来实现,同时也需要对计时器的状态进行修改:

适配移动设备

完成后,发现这个带声音的倒计时在Chrome下可以很完美地运行。然而把页面放到微信中去,却发现倒计时正常,开始音效也正常,滴滴声结束音效都不能正常播放!

仔细研究一番,才知道原来移动设备是不允许直接通过代码控制音频加载播放的,因为用户在移动网络下可能会产生昂贵的数据流量费用。

开始音效之所以能够正常播放,是因为它是由用户 click 触发的;滴滴声和结束声是在 setInterval() 中触发的,因此也就没办法播放了。不过幸运的是,对于已经加载的音频,我们可以通过代码控制其播放。所以我们只要在用户click的时候把需要的音频文件都加载下来就可以了,修改代码:

在第一次 play 的时候,由于 src 未设置,因此实际上是没有声音播放的:

 

搞定收工~~~

参考:

码字很辛苦,转载请注明来自ChenJiehua《简易的倒计时》

评论