技术-一个24h的时钟

# 摘要
为了治疗自己的晚睡,根据自己的作息特点与期望,用 html5 canvas 定制了一个钟,效果还不错.

# 拖延症
最近2年一直有晚睡问题,晚上不想睡,早晨不想起,睡眠不足不说,还连带经常迟到.

明明以前自我时间管理还不错,可是公司搬离了中关村,而我也从人民大学附近搬走之后,离开了操场,不愿意运动,就再也没有恢复健康的作息习惯.

也许这是拖延症在作祟,到了夜晚由于习惯了晚睡,也没有明确的睡觉时间点,也不想早睡,只要有精力就想耗光.

去年夏天就像做一个针对自己作息做一个特制的时钟,用于警示自己该休息了,并能提示剩余可用时间的工具.

一开始没有头绪也不知道应该做成什么样,但有几点需求是确定的:

- 白天要知道剩余可用的时间大致多久
- 夜晚要用警告提示,已经超时工作了多久

因为要把这个时钟能放在一个固定的地方显示,我第一直接想到的就是用 ipad 或者手机做客户端来显示时间.或者作为桌面背景能动态在我的 mac 上以动态背景形式来显示.

本来就一直想做,但是有这么几个技术点拦住了我:

- 如果用前端技术做,那个圆形的东西怎搞啊,我甚至想过用 div遮罩这种方式来切换显示时间
- 如果用客户端技术搞,我就要学 android 或 swift 开发, android 我是肯定不搞的, java 代码太恶心;swift 的话,我的 mac 倒是有环境,不过学习成本有点高.

想到这个,毕竟同时手里要搞别的项目,我就停下了脚步,一直没有做这个工具.而这一沉就是一年

# 着手
最近迷上吃鸡,经常玩到很晚也不想睡,都已经10点了,还想打开游戏,等队友都下线了,时间已经凌晨2~3点.

不行了,必须想办法调整自己的作息,首先要掌握自己的作息规律与时间信息为前提,于是我又回想起了我要做的那个钟.

今年由于项目中搞了不少前端的东西,对前端越发没有之前这么触眉头了, 也终于敢大量的用 js 写东西了,所以我想应该 js 和 h5是可以帮我在不用 div 遮罩的情况下也能帮我实现我要的时钟.

而且h5可以轻易的跨平台,有很多封装 web 的工具可以让我便捷的罢前端代码迁到移动端上.

于是,我首先搜了下 'js 时钟',于是找到了一个差不多
http://www.17sucai.com/pins/18969.html
![屏幕快照 2018-07-13 17.09.18.png](https://i.loli.net/2018/07/13/5b486c722adde.png)

这个确实是个可用的时钟,就是太丑了,我看了下它的代码,直觉上告诉我魔改成本不高.

本来我对 canvas 一窍不懂,但是它的代码非常之少,100行都不到,以至于让我相信,h5的canvas我是可以很快掌握的.

我对着 w3c 的说明,发现果然原来 canvas 制图就是描点划线而已,并没有之前想的那么难搞,这个代码调整下就应该能实现我要的效果.

# 魔改
首先因为我重点并不是知道当前具体时间,而是知道当前是否是工作时间,或者该睡眠了

所以我应该讲工作时间状态都设置成绿色,而睡眠时间都设置成红色警示.

而如果这种情况下,用12进制就很麻烦,时间需要转2圈才会出现红绿交叉,另外一圈全是绿色.

从这个角度讲,似乎12进制在这个年代钟表并没有什么实际意义,我回头查了下12进制钟表的必要性,也没查出什么结果.毕竟从我们这个时代的生活特点,就是一天分白天与黑夜,白天工作,夜间休息,指针转一圈就好了

而且分针秒针也没有什么用了,因为如今有电子计时,不需要指针来表示具体时刻.

所以基本需求就变成了:

- 24进制
- 不要分针秒针
- 白天绿色工作条,夜间红色休息条

然后我又加了个 break 时间用于吃饭和修整,于是第一个版本就有了

![屏幕快照 2018-07-13 17.09.30.png](https://i.loli.net/2018/07/13/5b486c722a852.png)

![屏幕快照 2018-07-13 17.52.59.png](https://i.loli.net/2018/07/13/5b487689258b8.png)

这个版本已经基本可以满足我的需求了,能够告诉我目前什么状态.大致时间还剩多少可用

但是我发现几个问题

- 其实我更需要关注的是剩余可用时间到底有多少需要起到倒计时的作用,用时针表示并不是足够好用的设计,而且太模糊
- 白天红条用不到,夜间绿条用不到
- 颜值颇低
- break 没啥用
- 夜晚睡眠时候警示性不够强

所以有了下一版本
![屏幕快照 2018-07-13 17.56.54.png](https://i.loli.net/2018/07/13/5b487779694c7.png)

![屏幕快照 2018-07-13 17.59.01.png](https://i.loli.net/2018/07/13/5b4877f373662.png)

这个版本实际我就已经很满意了,去掉了时针,直接以'血条'的方式显示当前时针,而夜晚直接以反色来提示,调整了字的排版,同时加入了具体的剩余可用时间,而且到了夜晚,可用时间就直接是负数了,很符合之前的心理预期.

但是还是有几点不满:

- 秒计时用处不大,但是去掉会直接失去时间正在流逝的感觉,所以应该尺寸小一些
- 虽然有了时间的剩余,但是缺少了个比例的关系,还是应该把白天与夜晚的总体可用时间表示出来.

最终调整后:

![day.png](https://i.loli.net/2018/07/12/5b4724538206a.png)
![night.png](https://i.loli.net/2018/07/12/5b4724538cce9.png)

这就让我很满意了,并且打开圆形缺口后,避免了设计上的呆板感觉.

那么我应该把它怎么体现呢,这是一个纯静态页面,想怎么放都可以,难不成直接放桌面一个 html?

这不妥,我想到一个简单的方案-直接把他发布为一个 chrome 插件,这样我随时打开浏览器就能调出来,而且我以某种方式把它发布了出去,意味着别人也可以用.

Chrome 插件版本 [下载](https://chrome.google.com/webstore/detail/24hclock/nhdmckjnclnoioojkpgfghcokbmklfpo?hl=zh-CN)

![屏幕快照 2018-07-13 12.20.19.png](https://i.loli.net/2018/07/13/5b4828bc79b27.png)

![屏幕快照 2018-07-12 21.35.42.png](https://i.loli.net/2018/07/13/5b487bfbb7926.png)

用了一天后,发现虽然随时可以用,但是不能一直常亮显示很麻烦,还是要做个手机端,放在桌面上了

于是我直接用 apicloud 把它封装成 app,拿到测试版:

![屏幕快照 2018-07-13 12.16.38.png](https://i.loli.net/2018/07/13/5b4828bc58dc7.png)

最后,设置屏幕常亮,安在支架上,就是一个不错的桌面时钟
![WechatIMG7.jpeg](https://i.loli.net/2018/07/13/5b486bd24230c.jpeg)

# 总结
这个小工具项目非常之小,非常个性化,虽然有这个想法1年之久了,但是实际动手做,只用一天时间就能全部搞定了.

但是它对我而言确实是必要的东西,自己需要,市面上没有,自己就直接做出来自己用了,这算是个极客行为,以后有时间尽量为自己做这种效率工具,挖掘价值,节省时间.

如果这个工具真有很多人要用,甚至可以搞pro版,比如可以提供设置自定义时间点之类的其他功能.

Liangchao's blog

最近发表

友情链接