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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1982 天前的主题，其中的信息可能已经有所发展或是发生改变。

demo

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

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

在线 DEMO

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

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

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

第 1 条附言 2020-05-12 18:20:09 +08:00

更新：

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

第 2 条附言 2020-05-25 14:46:41 +08:00

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

Demo

时间

进度

Wallpaper

39 条回复 2020-05-13 19:05:03 +08:00

leeUp

2020-05-09 23:26:32 +08:00

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

hikaruchang

2020-05-09 23:37:22 +08:00

-1 -1 -1 -1 ...

XBlackBerry

2020-05-09 23:42:05 +08:00 via Android

-1s

Smash

2020-05-10 00:08:57 +08:00 via Android

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

liuy1994g nbsp;

2020-05-10 02:18:21 +08:00 via Android

@Smash 透支了啊

liuy1994g

2020-05-10 02:18:48 +08:00 via Android

有没有环形的呀

leetao94

2020-05-10 08:28:00 +08:00

点击访问～ 403

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

tiaod

2020-05-10 09:32:32 +08:00 via Android

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

leetao94

2020-05-10 09:47:05 +08:00

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

hst001

2020-05-10 10:46:49 +08:00

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

tiaod

2020-05-10 11:03:04 +08:00

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

deyilee

2020-05-10 20:28:34 +08:00

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

tiaod

2020-05-10 21:02:04 +08:00

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

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

fxt0706

2020-05-10 21:09:19 +08:00

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

windplume

2020-05-10 21:17:42 +08:00

方向是不是反了

Vie

2020-05-10 21:23:56 +08:00

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

huyudong1991

2020-05-10 21:38:43 +08:00 via Android

php 版本就好了

tiaod

2020-05-10 21:48:39 +08:00

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

@huyudong1991 纯前端的，要 php 干啥

dr1q65MfKFKHnJr6

2020-05-10 21:49:35 +08:00

可以加个背景设置功能

zhao1014

2020-05-10 21:51:14 +08:00 via Android

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

hugsky

2020-05-10 21:58:36 +08:00

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

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

eptwd

2020-05-10 22:08:54 +08:00

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

whywhywhy

2020-05-11 01:19:27 +08:00

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

lithbitren

2020-05-11 01:33:45 +08:00

半夜看到这个真 jb 焦虑

c0xt30a

2020-05-11 01:58:28 +08:00

考虑下时区吧

ares586

2020-05-11 10:14:34 +08:00

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

Artbox

2020-05-11 11:54:42 +08:00

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

2020-05-11 12:23:37 +08:00

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

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

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

tiaod

2020-05-11 12:29:31 +08:00

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

zhangbohun

2020-05-11 13:04:16 +08:00

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

SuckCat

2020-05-11 13:42:15 +08:00

@XBlackBerry 5 月名单加急！！

c2boy

2020-05-11 15:27:15 +08:00

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

stevenkang

2020-05-11 17:12:33 +08:00

感谢分享。下班倒计时 get

baozhuo

2020-05-11 18:06:15 +08:00 via iPhone

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

TPOB

2020-05-11 21:56:11 +08:00

我这边 403 forbidden 诶

yesqu

2020-05-12 00:15:31 +08:00

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

tiaod

2020-05-12 17:56:50 +08:00

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

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

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

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

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

dr1q65MfKFKHnJr6

2020-05-12 21:17:30 +08:00

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

lanlan2020

2020-05-13 19:05:03 +08:00

ui 框架叫什么