为了账号安全,请及时绑定邮箱和手机立即绑定

自制的前端时钟小程序

最近在follow一个名为The-Programmers-Idea的书,里面有作者提出的很多小project的想法。我的想法是利用自身上班后的闲暇时间慢慢做完这些project。这些project基本都不难,但是想要做好确实需要一番心思,由于需要上班,平时还需要自学很多东西,因此project也是点到为止,不追求完美。该书一共有大约200左右的项目,想要都完成可能需要几年的时间...

这次的项目是选自书中Numbers章节里面的Alarm Clock,项目要求并不难,就是简单的做一个闹钟就可以了,为了完成这次的小项目,我决定采用前端技术来制作:

  • 框架: ReactJS
  • 编程语言:Javascript,HTML,CSS
  • 包管理及工具:npm,webpack
  • IDE:Atom

由于代码部分比较多,因此在这里就不一一展示代码了,代码的托管我放到了Github,有需要的朋友可以在下面的链接看到:

Clock项目托管地址

效果展示:

  1. 项目基本直观展示:
    图片描述

  2. 时间设定:
    图片描述

  3. 闹钟时间设定之后:
    图片描述

  4. 当到达闹铃时间后,会自动播放一个mp3片段来模拟真实的情况,播放时间为20s

由于项目里面使用了google的字体,如果没有cdn的话,国内访问可能有一些延迟或者访问不了,但是这并不影响项目的呈现,只是字体可能不能正确显示。

有不好的地方还请大家多多见谅。

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消