继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

自制的前端时钟小程序

crlyw
关注TA
已关注
手记 2
粉丝 14
获赞 8

最近在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的话,国内访问可能有一些延迟或者访问不了,但是这并不影响项目的呈现,只是字体可能不能正确显示。

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

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP