这篇文章主要分享:给自己设计一个无比简单的工作闹钟,提示自己注意劳逸结合,除了了工作也要定时休息。
整个闹钟项目的代码分为3部份,分别是:闹钟主页、闹钟记录、闹钟设置;文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
A. 闹钟主页的功能有点相似番茄闹钟,它由一个倒计时工具形成,只要客户点击按钮,就会开始倒计时;文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
B. 闹钟记录主要记录了客户每一次的点击操作,有点相似日志;文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
C. 闹钟设置可以自定义设置一些参数,包含设置工作时长、休息时长、背景音乐、背景图片。文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
整个闹钟项目的原理比较简单:文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
1、在设置页面有两个变量,分别是工作时长与休息时长,只要是主页中启动了闹钟,都会以这两个变量的值为准,进行倒计时;文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
2、只要点击了一次主页中的休息或工作按钮,都会触发一次记录,将记录值显示在“闹钟记录”这个页面中。文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
注:在设置功能区这里,可以自定义背景图片以及自定义铃声,这里是一个点击触发操作,两个bindtap尚无写后端的js代码,需要自己添加。文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
整个项目的代码逻辑很简单,大多数都是CSS代码,用来美化页面的样式。文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html 文章源自微观生活(93wg.com)微观生活-https://93wg.com/11550.html
评论