受楼下兄弟启发，周末肝了一会，也做了一个人生进度可视化网页

[biechuli]

体验地址：zshnb.com/lifetime 开源： https://github.com/zshnb/lifetime-visualization

在基本的可视化功能基础上，增加了个人信息设置，以及时间粒度切换 由于时间比较仓促，也没用 canvas 绘制，因此切换日 <-> 年粒度页面会有点卡顿，欢迎大佬们提 pr 优化一波

看来大家对 100 岁希望都不是很大，紧急更新把预期寿命给大家加上了

[LieNoWell]

很棒，希望可以调下暗黑模式的效果：

[nilai]

提个需求，预计寿命：100 岁 这个选项改为可输入设置，

[biechuli]

@MrSheng 感谢提醒，列入计划

[luckyv2]

要是能在方格上面 鼠标放过去 浮窗这个方框所代表的日期就更好了

[biechuli]

@nilai 这不是想让大家都长命百岁吗

[fd7917931e]

如果可以把参数添加到 URL 上，方便共享也是极好的

[biechuli]

@luckyv2 你说的这个正是我昨天最后一个想完成的 feature ，可惜时间来不及了 hh ，我给补上

[biechuli]

@fd7917931e 好主意诶，列入计划

[rimworld]

Application error: a client-side exception has occurred (see the browser console for more information).

[nilai]

长命百岁是理想中的， 我们还是得回归现实， 看看整体进度条，时刻给自己提醒， 所以 预计寿命 还是让大家自己掌控

[rimworld]

@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)

[biechuli]

@nilai 知道了马上改.jpg

[rimworld]

@rimworld 我想直接打字输入日期，但好像只能选择？

[biechuli]

@rimworld 大佬方便说一下怎么复现的嘛，我本地没有出现过这个错误

[corcre]

可以增加一个显示用户期望年龄, 平均年龄, 长命百岁的对比图

[biechuli]

@857681664 我用的 material-ui 的 date-picker 组件，不确定他们是不是支持直接输入，研究一下看看

[lx271896700133]

我何德何能，能活一百岁

[mitx]

点击日期的输入框，然后 MM 被选中，以为要键盘输入日期，刚摁第一个就报错了。

Application error: a client-side exception has occurred (see the browser console for more information).

看了回复才发现这是个选择器，要点右边的 icon 才能弹出来。有点不太合理。

[biechuli]

@mitx 明白了，我研究一下这个组件

[NutChocHoney]

粒度先切换到年再选生日 剩余天数计算有问题

[biechuli]

@NutChocHoney 还真是，我修一下

[xdzhang]

时间控件那里最好可以手动输入。

[Xmi080225]

100 岁？我预计我最多也就 60-70 岁，剩下的 OP 打算怎么补我

[eijuziew]

不错！希望加一个鼠标悬停在色块上面的时候显示年份（想看看上小学、初中、高中的时候是几几年）

[biechuli]

@Xmi080225 让大伙帮你匀匀🐶

[biechuli]

@impanghu 在做了在做了

[Daniel17]

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)

[Neillou]

80 岁是对自然的尊重. 100 的实用性太小了

[raysonlu]

对于年中才开学的实际情景做了怎样的展示决策？

[minglanyu]

👍

[minglanyu]

看了剩余多少天感觉自己快挂了。。

[proxytoworld]

纯路人(不会前端)，这东西能编译成 js 和 html 模板吗，想放到我的个人博客（使用 hugo ，挂在 GitHub pages 上），我寻思能不能做成一个 shortcode

[biechuli]

@proxytoworld 理论上应该是可以的，不过我没有研究过，你可以 fork 后魔改一下试试

[admol]

你的生日：1993-09-04 预计寿命：100 岁 已存活 363 天 剩余 837 天 祝大家长命百岁

------
认真的吗

[chiu]

最高学历的可选项好像限制了一部分人的使用...

[dule]

mac 暗黑模式下都看不到文字

[dule]

也找不到切换日夜间按钮

[PickOne]

预计寿命，把 100 删除后，NAN 无法再输入数字了。。需要全选后，才能继续敲数字

[biechuli]

@dule 暂时不支持暗黑模式，可能得改一下你的电脑设置

[version]

悬停小格子.显示日期最好的了.
还有啥时候能领取退休金.平均多少钱..每个年龄层得病率..等等等

[biechuli]

@PickOne 囧

[ddonano]

建议增加日历功能 添加备注啥的

[seven123]

不错，有个小建议，希望加一个鼠标悬停在色块上面的时候显示年份日期，并且能够显示当前的阶段小学、初中什么的

[dule]

随手切一切预计寿命网页咋还卡死了。。。

[biechuli]

@ddonano
@seven123
@version
收到建议，列入计划

[biechuli]

@dule 我没用 canvas 画，如果是日模式，要在网页上显示几万个 div ，修改数据重新渲染确实会让网页卡😮‍💨

[xiao8276]

学历能不能加 小学初中高中 我高中都没念怎么选

[spaling]

@857681664 给网页加个白色背景就行

[sarices]

一个大我 4 年的人剩余天数比多多 1000 多天，也是搞笑，年纪越大剩余的时间越多吗？

[GoCoV2]

感觉学历没什么必要，毕竟也不是人人都按部就班地上学

[sarices]

看错了，原来他填的预期寿命比我多 5 年，真鸡贼

[vagary]

1 ，滚动到当前位置的时候，也就是经历了各种颜色，中间位置的时候，前不着村后不着店，很迷。加个整体缩放功能之类的，不然在中间，就是一屏方格，甚至不知道经历多少，还剩下多少。
2 ，不通阶段的开始，加个气泡，目前只有简单颜色，还得回去看图例

[EthanLiu77]

效果很不错，提一个小 issue：点击日期输入框，直接使用键盘输入出生年月日，此时网页会直接崩掉

[LavaC]

@proxytoworld 让 op 做成能 iframe 引入的就可以了

[glfdsfs]

挺好玩的

[foveal]

可以把结婚年份，生娃年份，退休年份加上

[Aaron01]

不错的想法。

[sankemao]

我的电脑直接卡死

[JingXiao]

组件有问题吧
1. 组件想手动输入就出现这个问题
2. 预计寿命 把数字删完再输入 直接 NaN 且不可改变

[PlanV]

你这不是想让我长命百岁啊，你这是想让我下个月就死啊

[zhlxsh]

我觉得，我能活到 70 岁就很好很好了

[biechuli]

@JingXiao
@PlanV 在修了.jpg

[kloudmuka]

点击文本框准备手动输入日期的时候一按键盘直接报错：Application error: a client-side exception has occurred (see the browser console for more information).控制台显示 RangeError: Invalid time value

[snsao]

赞，如果能增加一个导出全图的功能就更好了，感觉自己时日无多了（

[silverwolf]

乍一看，这域名好熟悉？

张三：好牛逼！

[lzyoutlook]

显示粒度可以加个‘周’级别么

[magicluna01]

这一代人都是吃转基因的，连矿泉水里都是人体不可降解的微塑料，不太可能活到 70+。

[zhuawadao]

希望显示粒度有"周"

[kernelpanic]

你是怎么做到这么简单一个功能搞出来这么多 bug 的...

[abersheeran]

一共三个框，两个可以手动输入的都报错……

[pppanda]

这个点很像网际快车的下载视图

[biechuli]

@kernelpanic
@abersheeran 学艺不精，给大伙笑话了（

[LetsGiao]

@kernelpanic #69 这不周末做的嘛，要是工作日摸鱼做的，可能就 bug free 了

[biechuli]

@lzyoutlook
@zhuawadao 看到一个大兄弟提交了一个周粒度的 pr ，我看看没问题就可以发布了

[Maiiiiii]

一个小的建议，可以增加入学年纪的配置

[v2er4241]

日期不准确，而且样式超出了可视化边界。

[biechuli]

@klo424 日期的话只有在日粒度下是精确的，其他粒度下的日是不准确的

[allgy]

怎么跑起来啊，后端不懂这些

[Loratad1ne]

最高学历四个字和框框重叠啦

[egonet]

推荐个 ios App：生辰

[AnYongMaple]

众所周知，每年 9.1 是开学日，所以入学跟毕业时间都是错的

[zjyl1994]

啊哈哈哈，我也有个类似的，只不过我显示的是退休年龄，你要不要加个 60 岁的标记位，每天看着还有点奔头

[EarthChild]

@rimworld #13 一样，你输入生日的时候手动输入 asd 等，就报错了

[NessajCN]

建议做成实时跳动的倒计时
您的生命还剩下：2428271618277 毫秒

[southpark]

@egonet #80 好久没有更新了，还需要一块钱

[hbhh479q]

在生日那一栏，mac 系统用小键盘一输入 3 就报错

[mohulai]

月日年的格式多少有点别扭

[biechuli]

@AnYongMaple 太严谨了，都忘了这茬

[PsychoKidA]

支持自定义修改么？比如硕士与大学本科间有一段时间的 Gap

[biechuli]

@PsychoKidA 暂时不支持，不过这个需求很合理，可以列入计划

[churchmice]

你肝这玩意自己的进度条是不是又往后长了？

[evil0harry]

@sankemao 我也是

[moe3000]

可以做个纵向时间轴那种？再加个自定义大事纪，自定义未来某目标

[biechuli]

@moe3000 可以的

[zrPdwnBG4d370K5H]

小小建议：

除了在日颗粒度之外，今天是 xx 年 xx 月 xx 日 简化为显示到月或者不显示，要不然选择周今天是的日期不是当天日期，还以为你的服务器日期错了。

[yyttrr]

9 月 1 日前后出生的人可能入学差一年，这个可以处理一下，默认按照 9 月 1 号分

[catamaran]

看完我哭了，没几个格子了

[GG668v26Fd55CP5W]

好家伙，整这么多 bug 成功吸引了我的注意。

[OutOfMemoryError]

@857681664 #90 以及专升本，实现周期也不大一样

[ClaudeCode]

bug 挺多的