受楼下兄弟启发，周末肝了一会，也做了一个人生进度可视化网页
857681664 · zshnb · 2023-12-11 10:39:04 +08:00 · 23675 次点击这是一个创建于 382 天前的主题，其中的信息可能已经有所发展或是发生改变。
体验地址：zshnb.com/lifetime
开源： https://github.com/zshnb/lifetime-visualization
在基本的可视化功能基础上，增加了个人信息设置，以及时间粒度切换 由于时间比较仓促，也没用 canvas 绘制，因此切换日 <-> 年粒度页面会有点卡顿，欢迎大佬们提 pr 优化一波
第 1 条附言 · 2023-12-11 11:25:44 +08:00
看来大家对 100 岁希望都不是很大，紧急更新把预期寿命给大家加上了
 |
1
MrSheng 2023-12-11 10:40:03 +08:00
很棒，希望可以调下暗黑模式的效果：
 |
 |
2
nilai 2023-12-11 10:42:41 +08:00  1
提个需求，预计寿命：100 岁 这个选项改为可输入设置，
|
 |
4
luckyv2 2023-12-11 10:43:48 +08:00
要是能在方格上面 鼠标放过去 浮窗这个方框所代表的日期就更好了
|
 |
6
fd7917931e 2023-12-11 10:43:55 +08:00
如果可以把参数添加到 URL 上，方便共享也是极好的
|
 |
8
857681664 OP @fd7917931e 好主意诶，列入计划
|
 |
9
rimworld 2023-12-11 10:45:25 +08:00
Application error: a client-side exception has occurred (see the browser console for more information).
|
|
10
nilai 2023-12-11 10:45:36 +08:00
长命百岁是理想中的， 我们还是得回归现实， 看看整体进度条，时刻给自己提醒， 所以 预计寿命 还是让大家自己掌控
|
|
11
rimworld 2023-12-11 10:45:53 +08:00
@rimworld Invalid Date RangeError: Invalid time value
at D (21-9005f61eeac4604b.js:76:19748) at w (page-37ab4cacf8821ef0.js:1:4514) at rb (d16e89e2-c27535e0e32b8127.js:1:40328) at lA (d16e89e2-c27535e0e32b8127.js:1:59076) at iU (d16e89e2-c27535e0e32b8127.js:1:117012) at o2 (d16e89e2-c27535e0e32b8127.js:1:94368) at d16e89e2-c27535e0e32b8127.js:1:94190 at o1 (d16e89e2-c27535e0e32b8127.js:1:94197) at oV (d16e89e2-c27535e0e32b8127.js:1:91684) at n1 (d16e89e2-c27535e0e32b8127.js:1:37341) |
 |
15
corcre 2023-12-11 10:47:17 +08:00
可以增加一个显示用户期望年龄, 平均年龄, 长命百岁的对比图
|
|
16
857681664 OP @857681664 我用的 material-ui 的 date-picker 组件，不确定他们是不是支持直接输入，研究一下看看
|
 |
17
lx271896700133 2023-12-11 10:48:45 +08:00 2
我何德何能，能活一百岁
|
 |
18
mitx 2023-12-11 10:52:13 +08:00 1
点击日期的输入框，然后 MM 被选中，以为要键盘输入日期，刚摁第一个就报错了。
Application error: a client-side exception has occurred (see the browser console for more information). 看了回复才发现这是个选择器，要点右边的 icon 才能弹出来。有点不太合理。 |
 |
20
NutChocHoney 2023-12-11 11:01:15 +08:00
粒度先切换到年再选生日 剩余天数计算有问题
|
|
21
857681664 OP @NutChocHoney 还真是，我修一下
|
 |
22
xdzhang 2023-12-11 11:05:17 +08:00
时间控件那里最好可以手动输入。
|
 |
23
Xmi080225 2023-12-11 11:05:34 +08:00 1
100 岁？我预计我最多也就 60-70 岁，剩下的 OP 打算怎么补我
|
 |
24
impanghu 2023-12-11 11:06:06 +08:00
不错！希望加一个鼠标悬停在色块上面的时候显示年份（想看看上小学、初中、高中的时候是几几年）
|
 |
27
Daniel17 2023-12-11 11:08:57 +08:00
Application error: a client-side exception has occurred (see the browser console for more information).
单选月，本科，然后输入月份的时候报错 RangeError: Invalid time value at D (21-9005f61eeac4604b.js:76:19748) at w (page-37ab4cacf8821ef0.js:1:4514) at rb (d16e89e2-c27535e0e32b8127.js:1:40328) at lA (d16e89e2-c27535e0e32b8127.js:1:59076) at iU (d16e89e2-c27535e0e32b8127.js:1:117012) at o2 (d16e89e2-c27535e0e32b8127.js:1:94368) at d16e89e2-c27535e0e32b8127.js:1:94190 at o1 (d16e89e2-c27535e0e32b8127.js:1:94197) at oV (d16e89e2-c27535e0e32b8127.js:1:91684) at n1 (d16e89e2-c27535e0e32b8127.js:1:37341) |
 |
28
Neillou 2023-12-11 11:12:20 +08:00
80 岁是对自然的尊重. 100 的实用性太小了
|
 |
29
raysonlu 2023-12-11 11:18:06 +08:00
对于年中才开学的实际情景做了怎样的展示决策？
|
 |
30
minglanyu 2023-12-11 11:20:23 +08:00
👍
|
|
31
minglanyu 2023-12-11 11:22:36 +08:00
看了剩余多少天感觉自己快挂了。。
|
 |
32
proxytoworld 2023-12-11 11:25:18 +08:00
纯路人(不会前端)，这东西能编译成 js 和 html 模板吗，想放到我的个人博客（使用 hugo ，挂在 GitHub pages 上），我寻思能不能做成一个 shortcode
|
|
33
857681664 OP @proxytoworld 理论上应该是可以的，不过我没有研究过，你可以 fork 后魔改一下试试
|
 |
34
admol 2023-12-11 11:27:40 +08:00
你的生日：1993-09-04 预计寿命：100 岁 已存活 363 天 剩余 837 天 祝大家长命百岁
------ 认真的吗 |
 |
35
chiu 2023-12-11 11:27:46 +08:00
最高学历的可选项好像限制了一部分人的使用...
|
 |
36
dule 2023-12-11 11:30:37 +08:00
mac 暗黑模式下都看不到文字
|
|
37
dule 2023-12-11 11:32:42 +08:00
也找不到切换日夜间按钮
|
 |
38
PickOne 2023-12-11 11:32:59 +08:00
预计寿命，把 100 删除后，NAN 无法再输入数字了。。需要全选后，才能继续敲数字
 |
 |
40
version 2023-12-11 11:34:43 +08:00 1
悬停小格子.显示日期最好的了.
还有啥时候能领取退休金.平均多少钱..每个年龄层得病率..等等等 |
 |
42
ddonano 2023-12-11 11:35:40 +08:00
建议增加日历功能 添加备注啥的
|
 |
43
seven123 2023-12-11 11:37:02 +08:00
不错，有个小建议，希望加一个鼠标悬停在色块上面的时候显示年份日期，并且能够显示当前的阶段小学、初中什么的
|
|
44
dule 2023-12-11 11:38:26 +08:00
随手切一切预计寿命网页咋还卡死了。。。
|
|
46
857681664 OP @dule 我没用 canvas 画，如果是日模式，要在网页上显示几万个 div ，修改数据重新渲染确实会让网页卡😮💨
|
 |
47
xiao8276 2023-12-11 11:43:43 +08:00
学历能不能加 小学初中高中 我高中都没念怎么选
|
 |
49
sarices 2023-12-11 11:46:03 +08:00
一个大我 4 年的人剩余天数比多多 1000 多天，也是搞笑，年纪越大剩余的时间越多吗？
|
 |
50
GoCoV2 2023-12-11 11:47:30 +08:00
感觉学历没什么必要，毕竟也不是人人都按部就班地上学
|
|
51
sarices 2023-12-11 11:48:29 +08:00
看错了，原来他填的预期寿命比我多 5 年，真鸡贼
|
 |
52
vagary 2023-12-11 11:48:46 +08:00
1 ，滚动到当前位置的时候，也就是经历了各种颜色，中间位置的时候，前不着村后不着店，很迷。加个整体缩放功能之类的，不然在中间，就是一屏方格，甚至不知道经历多少，还剩下多少。
2 ，不通阶段的开始，加个气泡，目前只有简单颜色，还得回去看图例 |
 |
53
EthanLiu77 2023-12-11 11:49:09 +08:00
效果很不错，提一个小 issue：点击日期输入框，直接使用键盘输入出生年月日，此时网页会直接崩掉
|
 |
54
LavaC 2023-12-11 11:52:35 +08:00 via Android
@proxytoworld 让 op 做成能 iframe 引入的就可以了
|
 |
55
glfdsfs 2023-12-11 11:54:44 +08:00
挺好玩的
|
 |
56
foveal 2023-12-11 12:22:07 +08:00 1
可以把结婚年份，生娃年份，退休年份加上
|
 |
57
Aaron01 2023-12-11 13:01:04 +08:00
不错的想法。
|
 |
58
sankemao 2023-12-11 13:13:01 +08:00
我的电脑直接卡死
|
 |
59
JingXiao 2023-12-11 13:16:51 +08:00
组件有问题吧
 1. 组件想手动输入就出现这个问题 2. 预计寿命 把数字删完再输入 直接 NaN 且不可改变 |
 |
60
PlanV 2023-12-11 13:17:02 +08:00
 你这不是想让我长命百岁啊，你这是想让我下个月就死啊  |
 |
61
zhlxsh 2023-12-11 13:20:11 +08:00 via iPhone
我觉得，我能活到 70 岁就很好很好了
|
 |
63
kloudmuka 2023-12-11 13:29:27 +08:00
点击文本框准备手动输入日期的时候一按键盘直接报错：Application error: a client-side exception has occurred (see the browser console for more information).控制台显示 RangeError: Invalid time value
|
 |
64
snsao 2023-12-11 13:31:23 +08:00
赞，如果能增加一个导出全图的功能就更好了，感觉自己时日无多了（
|
 |
65
silverwolf 2023-12-11 13:32:16 +08:00
乍一看，这域名好熟悉？
张三：好牛逼！ |
 |
66
lzyoutlook 2023-12-11 13:32:17 +08:00
显示粒度可以加个‘周’级别么
|
 |
67
magicluna01 2023-12-11 13:32:25 +08:00
这一代人都是吃转基因的，连矿泉水里都是人体不可降解的微塑料，不太可能活到 70+。
|
 |
68
zhuawadao 2023-12-11 13:33:34 +08:00
希望显示粒度有"周"
|
 |
69
kernelpanic 2023-12-11 13:34:15 +08:00 14
你是怎么做到这么简单一个功能搞出来这么多 bug 的...
|
 |
70
abersheeran 2023-12-11 13:37:18 +08:00
一共三个框，两个可以手动输入的都报错……
|
 |
71
pppanda 2023-12-11 13:40:31 +08:00 1
这个点很像网际快车的下载视图
 |
|
72
857681664 OP |
 |
73
LetsGiao 2023-12-11 13:42:25 +08:00
@kernelpanic #69 这不周末做的嘛，要是工作日摸鱼做的，可能就 bug free 了
 |
|
74
857681664 OP |
 |
75
Maiiiiii 2023-12-11 13:47:16 +08:00
一个小的建议，可以增加入学年纪的配置
|
 |
76
klo424 2023-12-11 13:48:59 +08:00
日期不准确，而且样式超出了可视化边界。
|
 |
78
allgy 2023-12-11 13:54:07 +08:00
怎么跑起来啊，后端不懂这些
|
 |
79
Loratad1ne 2023-12-11 13:57:02 +08:00
最高学历四个字和框框重叠啦
|
 |
80
egonet 2023-12-11 13:57:04 +08:00
推荐个 ios App：生辰
|
 |
81
AnYongMaple 2023-12-11 14:00:12 +08:00
众所周知，每年 9.1 是开学日，所以入学跟毕业时间都是错的
|
 |
82
zjyl1994 2023-12-11 14:01:42 +08:00
啊哈哈哈，我也有个类似的，只不过我显示的是退休年龄，你要不要加个 60 岁的标记位，每天看着还有点奔头
|
 |
83
EarthChild 2023-12-11 14:07:45 +08:00
@rimworld #13 一样，你输入生日的时候手动输入 asd 等，就报错了
|
 |
84
NessajCN 2023-12-11 14:08:26 +08:00
建议做成实时跳动的倒计时
您的生命还剩下：2428271618277 毫秒 |
 |
86
hbhh479q 2023-12-11 14:12:08 +08:00
在生日那一栏，mac 系统用小键盘一输入 3 就报错
|
 |
87
mohulai 2023-12-11 14:13:31 +08:00
月日年的格式多少有点别扭
|
|
88
857681664 OP @AnYongMaple 太严谨了，都忘了这茬
|
 |
89
PsychoKidA 2023-12-11 14:16:33 +08:00
支持自定义修改么？比如硕士与大学本科间有一段时间的 Gap
|
|
90
857681664 OP @PsychoKidA 暂时不支持，不过这个需求很合理，可以列入计划
|
 |
91
churchmice 2023-12-11 14:17:23 +08:00
你肝这玩意自己的进度条是不是又往后长了？
|
 |
92
evil0harry 2023-12-11 14:21:32 +08:00
@sankemao 我也是
|
 |
93
moe3000 2023-12-11 14:22:04 +08:00
可以做个纵向时间轴那种？再加个自定义大事纪，自定义未来某目标
|
 |
95
vinery 2023-12-11 14:30:18 +08:00
小小建议：
除了在日颗粒度之外，今天是 xx 年 xx 月 xx 日 简化为显示到月或者不显示，要不然选择周今天是的日期不是当天日期，还以为你的服务器日期错了。 |
 |
96
yyttrr 2023-12-11 14:32:41 +08:00
9 月 1 日前后出生的人可能入学差一年，这个可以处理一下，默认按照 9 月 1 号分
|
 |
97
catamaran 2023-12-11 14:34:38 +08:00 1
看完我哭了，没几个格子了
|
 |
98
falcon05 2023-12-11 14:35:05 +08:00 via iPhone 1
好家伙，整这么多 bug 成功吸引了我的注意。
|
 |
99
OutOfMemoryError 2023-12-11 14:38:50 +08:00
@857681664 #90 以及专升本，实现周期也不大一样
|
 |
100
yaocai321 2023-12-11 14:41:01 +08:00
bug 挺多的
|
Select Language