写了个显示今天剩余时间的进度条

[tiaod]

以起床时间开始，睡觉时间结束（默认是 9:00~22:00 ），让你直观感受时间流逝，把握时间完成工作，从而按时睡觉。

之所以写这个，是因为找了很多个显示时间进度条的项目都不满足我的需求，那些项目都是统计 0:00~24:00 的，容易给人晚上时间很多的错觉，从而习惯熬夜。

在线 DEMO

推荐使用Wallpaper engine或者lively之类的工具设置为桌面背景。

看着时间像手机电池电量一样减少，感觉是很奇妙的。

github 地址： https://github.com/tiaod/day-progress

更新：

• 支持设置背景图
• 支持修改进度条颜色
• 参数自动保存到url，方便复制到lively

打不开的可以用这个地址：
https://tiaod.github.io/day-progress/

[leeUp]

警告！你正在透支明天！哈哈哈哈挺有创意的😁

[hikaruchang]

-1 -1 -1 -1 ...

[XBlackBerry]

-1s

[Smash]

有 bug,还是特意的？进度条会超过百分之百

[liuy1994g]

@Smash 透支了啊😂

[liuy1994g]

有没有环形的呀

[leetao94]

点击访问～ 403

403 Forbidden
Code: AccessDenied
Message: You are denied by bucket referer rule
Key: day-progress/index.html
RequestId: NWViNzRhNzVfMWNiMjk0MGFfNmVmZl8yNDkxZTMw
TraceId: OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTQ5YWUxMjNkYTk3NzdjZmZlMDQzOTgxOThkOTNlOWFkZjBjZjY5OGU2ZTBmZWM0MmE4YjI2OWU3YjQ2YTU5NTM=

[tiaod]

@Smash 默认是 9:00~22:00，在 9:00 之前打开就会超过 100%，点击设置按钮可以调节时间。

[leetao94]

~~能正常访问了，这个和那个人生进度一样～看了引起不适😂😂😂

[hst001]

@XBlackBerry #3 几年前写的一个 chrome 主页插件就叫 -1s，现在不知道还能不能搜到了

[tiaod]

@liuy1994g 环形的进度条已添加，点击设置就可以切换啦。如果有缓存就强制刷新一下

[deyilee]

作为桌面非常棒！求教怎么在 wallpaper 上设置

[tiaod]

@deyilee 可以用 wallpaper engine，不过我推荐开源的 lively，地址：
https://github.com/rocksdanister/lively

直接将在线 demo 的地址填进去就可以了： https://hacker-mu.uvcat.com/day-progress/

[fxt0706]

摸了一会鱼感觉没过多久，发现时间少了 1%，太真实了

[windplume]

方向是不是反了

[Vie]

打开一看，一股压力莫名袭来

[huyudong1991]

php 版本就好了🤣

[tiaod]

@windplume 要的就是这种血条减少一样的效果

@huyudong1991 纯前端的，要 php 干啥🤣

[dr1q65MfKFKHnJr6]

可以加个 背景设置功能

[zhao1014]

设置成背景了，非常有用，我正需要这个！谢谢分享！

[hugsky]

PS 了一个进度示意，不知是否有软件能实现类似效果。

https://i.loli.net/2020/05/10/6QB72Eng19jbrRl.jpg

[eptwd]

每天都这么焦虑了，这么搞像是在逼死自己。不如做一个周末倒计时。

[whywhywhy]

奇怪，我显示器在这块深灰色的图片区域，会一闪一闪的。。。

[lithbitren]

半夜看到这个真 jb 焦虑

[c0xt30a]

考虑下时区吧

[ares586]

不错的工具，放在工位上了~

[Artbox]

1 默认是 9:00~22:00，在 9:00 之前打开就会超过 100%，点击设置按钮可以调节时间。理解。
2 设置成 23:00-22:00，显示 1 天 ，应该是 23:00-次日 22:00，理解
3 设置成 23:00-22:00，在 12:00 打开超过 100% ?这个进度条认为我在 23:00 前打开？而不是在 10:00 结束前还有 50%？
4 设置成 23:00-22:00，在 日期+1 1:00 打开，显示 2 天 ？
时 间 刺 客
猜测实现的逻辑是判断 开始时间之前 而不是 较早时间之前
时间刺客 2.0👇
https://i.loli.net/2020/05/11/u7SkrENfRVlxIYT.jpg

[tiaod]

@cedoo22 背景设置，这个可以有，但是我得看看怎么加，因为是纯前端的，看看怎么样把图片保存到前端

@hugsky Mac 开发我不会，我只是个前端

@c0xt30a 应该不存在时区问题吧，直接读取浏览器时间来计算的。

[tiaod]

@Artbox 是有点问题，其实算这个我也绕的有点晕，我看看怎么样完善一下

[zhangbohun]

希望支持 url 参数配置，不然用做壁纸每次重启以后都会变回初始的设置，lively 好像不能保持 localstorage?

[SuckCat]

@XBlackBerry 5 月名单加急！！

[c2boy]

设置成 9 点到 5 点半就能知道还有多久下班了

[stevenkang]

感谢分享。下班倒计时 get

[baozhuo]

借你的楼实现了一个微信小程序版的，搜“今日倒计时”可以看到🙈🙈

[TPOB]

我这边 403 forbidden 诶

[yesqu]

厉害啊！！！感谢分享，开个脑洞，如果要是可以在标题栏常驻或者 toolbar 上常驻应该效果很高吧！先挖个坑，等大神

[tiaod]

@cedoo22 背景设置支持了，不过目前只支持填写图片地址，有自定义需求的话可以找图床上传图片。另外还支持了设置进度条的颜色。

@zhangbohun 参数配置保存到 url 也支持了，现在可以在网页里设置好再复制到 lively 啦。

@c2boy
@stevenkang 哈哈，也是不错的用法

@baozhuo 兄弟你这个也是统计 0~24 点的，我找过很多类似的，也都是不支持自定义时间，没办法了才动手写这个的呀。

@TPOB 刷新下试试？还不行的话我 github pages 也传一份吧。目前是放在腾讯云的 cos

[dr1q65MfKFKHnJr6]

@tiaod 程序员 为啥这么多喜欢二次元的背景啊

[lanlan2020]

ui 框架叫什么