受楼下兄弟启发,周末肝了一会,也做了一个人生进度可视化网页 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
857681664
V2EX    分享创造

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

  857681664
zshnb 2023 年 12 月 11 日 27931 次点击
这是一个创建于 771 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

第 1 条附言    2023 年 12 月 11 日
看来大家对 100 岁希望都不是很大,紧急更新把预期寿命给大家加上了
183 条回复    2024-01-08 16:49:49 +08:00
1  2  
LieNoWell
    1
LieNoWell  
   2023 年 12 月 11 日
很棒,希望可以调下暗黑模式的效果:
nilai
    2
nilai  
   2023 年 12 月 11 日   1
提个需求,预计寿命:100 岁 这个选项改为可输入设置,
857681664
    3
857681664  
OP
   2023 年 12 月 11 日
@MrSheng 感谢提醒,列入计划
luckyv2
    4
luckyv2  
   2023 年 12 月 11 日
要是能在方格上面 鼠标放过去 浮窗这个方框所代表的日期就更好了
857681664
    5
857681664  
OP
   2023 年 12 月 11 日   1
@nilai 这不是想让大家都长命百岁吗
fd7917931e
    6
fd7917931e  
   2023 年 12 月 11 日
如果可以把参数添加到 URL 上,方便共享也是极好的
857681664
    7
857681664  
OP
   2023 年 12 月 11 日
@luckyv2 你说的这个正是我昨天最后一个想完成的 feature ,可惜时间来不及了 hh ,我给补上
857681664
    8
857681664  
OP
   2023 年 12 月 11 日
@fd7917931e 好主意诶,列入计划
rimworld
    9
rimworld  
   2023 年 12 月 11 日
Application error: a client-side exception has occurred (see the browser console for more information).
nilai
    10
nilai  
   2023 年 12 月 11 日
长命百岁是理想中的, 我们还是得回归现实, 看看整体进度条,时刻给自己提醒, 所以 预计寿命 还是让大家自己掌控
rimworld
    11
rimworld  
   2023 年 12 月 11 日
@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)
857681664
    12
857681664  
OP
   2023 年 12 月 11 日
@nilai 知道了马上改.jpg
rimworld
    13
rimworld  
   2023 年 12 月 11 日
@rimworld 我想直接打字输入日期,但好像只能选择?
857681664
    14
857681664  
OP
   2023 年 12 月 11 日
@rimworld 大佬方便说一下怎么复现的嘛,我本地没有出现过这个错误
corcre
    15
corcre  
   2023 年 12 月 11 日
可以增加一个显示用户期望年龄, 平均年龄, 长命百岁的对比图
857681664
    16
857681664  
OP
   2023 年 12 月 11 日
@857681664 我用的 material-ui 的 date-picker 组件,不确定他们是不是支持直接输入,研究一下看看
lx271896700133
    17
lx271896700133  
   2023 年 12 月 11 日   2
我何德何能,能活一百岁
mitx
    18
mitx  
   2023 年 12 月 11 日   1
点击日期的输入框,然后 MM 被选中,以为要键盘输入日期,刚摁第一个就报错了。

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

看了回复才发现这是个选择器,要点右边的 icon 才能弹出来。有点不太合理。
857681664
    19
857681664  
OP
   2023 年 12 月 11 日
@mitx 明白了,我研究一下这个组件
NutChocHoney
    20
NutChocHoney  
   2023 年 12 月 11 日
粒度先切换到年再选生日 剩余天数计算有问题
857681664
    21
857681664  
OP
   2023 年 12 月 11 日
@NutChocHoney 还真是,我修一下
xdzhang
    22
xdzhang  
   2023 年 12 月 11 日
时间控件那里最好可以手动输入。
Xmi080225
    23
Xmi080225  
   2023 年 12 月 11 日   1
100 岁?我预计我最多也就 60-70 岁,剩下的 OP 打算怎么补我
impanghu
    24
impanghu  
   2023 年 12 月 11 日
不错!希望加一个鼠标悬停在色块上面的时候显示年份(想看看上小学、初中、高中的时候是几几年)
857681664
    25
857681664  
OP
   2023 年 12 月 11 日   1
@Xmi080225 让大伙帮你匀匀
857681664
    26
857681664  
OP
   2023 年 12 月 11 日
@impanghu 在做了在做了
Daniel17
    27
Daniel17  
   2023 年 12 月 11 日
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
    28
Neillou  
   2023 年 12 月 11 日
80 岁是对自然的尊重. 100 的实用性太小了
raysonlu
    29
raysonlu  
   2023 年 12 月 11 日
对于年中才开学的实际情景做了怎样的展示决策?
minglanyu
    30
minglanyu  
   2023 年 12 月 11 日
minglanyu
    31
minglanyu  
   2023 年 12 月 11 日
看了剩余多少天感觉自己快挂了。。
proxytoworld
    32
proxytoworld  
   2023 年 12 月 11 日
纯路人(不会前端),这东西能编译成 js 和 html 模板吗,想放到我的个人博客(使用 hugo ,挂在 GitHub pages 上),我寻思能不能做成一个 shortcode
857681664
    33
857681664  
OP
   2023 年 12 月 11 日
@proxytoworld 理论上应该是可以的,不过我没有研究过,你可以 fork 后魔改一下试试
admol
    34
admol  
   2023 年 12 月 11 日
你的生日:1993-09-04 预计寿命:100 岁 已存活 363 天 剩余 837 天 祝大家长命百岁

------
认真的吗
chiu
    35
chiu  
   2023 年 12 月 11 日
最高学历的可选项好像限制了一部分人的使用...
dule
    36
dule  
   2023 年 12 月 11 日
mac 暗黑模式下都看不到文字
dule
    37
dule  
   2023 年 12 月 11 日
也找不到切换日夜间按钮
PickOne
    38
PickOne  
   2023 年 12 月 11 日
预计寿命,把 100 删除后,NAN 无法再输入数字了。。需要全选后,才能继续敲数字

857681664
    39
857681664  
OP
   2023 年 12 月 11 日
@dule 暂时不支持暗黑模式,可能得改一下你的电脑设置
version
    40
version  
   2023 年 12 月 11 日   1
悬停小格子.显示日期最好的了.
还有啥时候能领取退休金.平均多少钱..每个年龄层得病率..等等等
857681664
    41
857681664  
OP
   2023 年 12 月 11 日
ddonano
    42
ddonano  
   2023 年 12 月 11 日
建议增加日历功能 添加备注啥的
seven123
    43
seven123  
   2023 年 12 月 11 日
不错,有个小建议,希望加一个鼠标悬停在色块上面的时候显示年份日期,并且能够显示当前的阶段小学、初中什么的
dule
    44
dule  
   2023 年 12 月 11 日
随手切一切预计寿命网页咋还卡死了。。。
857681664
    45
857681664  
OP
   2023 年 12 月 11 日
@ddonano
@seven123
@version
收到建议,列入计划
857681664
    46
857681664  
OP
   2023 年 12 月 11 日
@dule 我没用 canvas 画,如果是日模式,要在网页上显示几万个 div ,修改数据重新渲染确实会让网页卡
xiao8276
    47
xiao8276  
   2023 年 12 月 11 日
学历能不能加 小学初中高中 我高中都没念怎么选
spaling
    48
spaling  
   2023 年 12 月 11 日
@857681664 给网页加个白色背景就行
sarices
    49
sarices  
   2023 年 12 月 11 日
一个大我 4 年的人剩余天数比多多 1000 多天,也是搞笑,年纪越大剩余的时间越多吗?
GoCoV2
    50
GoCoV2  
   2023 年 12 月 11 日
感觉学历没什么必要,毕竟也不是人人都按部就班地上学
sarices
    51
sarices  
   2023 年 12 月 11 日
看错了,原来他填的预期寿命比我多 5 年,真鸡贼
vagary
    52
vagary  
   2023 年 12 月 11 日
1 ,滚动到当前位置的时候,也就是经历了各种颜色,中间位置的时候,前不着村后不着店,很迷。加个整体缩放功能之类的,不然在中间,就是一屏方格,甚至不知道经历多少,还剩下多少。
2 ,不通阶段的开始,加个气泡,目前只有简单颜色,还得回去看图例
EthanLiu77
    53
EthanLiu77  
   2023 年 12 月 11 日
效果很不错,提一个小 issue:点击日期输入框,直接使用键盘输入出生年月日,此时网页会直接崩掉
LavaC
    54
LavaC  
   2023 年 12 月 11 日 via Android
@proxytoworld 让 op 做成能 iframe 引入的就可以了
glfdsfs
    55
glfdsfs  
   2023 年 12 月 11 日
挺好玩的
foveal
    56
foveal  
   2023 年 12 月 11 日   1
可以把结婚年份,生娃年份,退休年份加上
    57
Aaron01  
   2023 年 12 月 11 日
不错的想法。
sankemao
    58
sankemao  
   2023 年 12 月 11 日
我的电脑直接卡死
JingXiao
    59
JingXiao  
   2023 年 12 月 11 日
组件有问题吧
1. 组件想手动输入就出现这个问题
2. 预计寿命 把数字删完再输入 直接 NaN 且不可改变
PlanV
    60
PlanV  
   2023 年 12 月 11 日


你这不是想让我长命百岁啊,你这是想让我下个月就死啊
zhlxsh
    61
zhlxsh  
   2023 年 12 月 11 日 via iPhone
我觉得,我能活到 70 岁就很好很好了
857681664
    62
857681664  
OP
   2023 年 12 月 11 日
@JingXiao
@PlanV 在修了.jpg
kloudmuka
    63
kloudmuka  
   2023 年 12 月 11 日
点击文本框准备手动输入日期的时候一按键盘直接报错:Application error: a client-side exception has occurred (see the browser console for more information).控制台显示 RangeError: Invalid time value
snsao
    64
snsao  
   2023 年 12 月 11 日
赞,如果能增加一个导出全图的功能就更好了,感觉自己时日无多了(
silverwolf
    65
silverwolf  
   2023 年 12 月 11 日
乍一看,这域名好熟悉?

张三:好牛逼!
lzyoutlook
    66
lzyoutlook  
   2023 年 12 月 11 日
显示粒度可以加个‘周’级别么
magicluna01
    67
magicluna01  
   2023 年 12 月 11 日
这一代人都是吃转基因的,连矿泉水里都是人体不可降解的微塑料,不太可能活到 70+。
zhuawadao
    68
zhuawadao  
   2023 年 12 月 11 日
希望显示粒度有"周"
kernelpanic
    69
kernelpanic  
   2023 年 12 月 11 日   14
你是怎么做到这么简单一个功能搞出来这么多 bug 的...
abersheeran
    70
abersheeran  
   2023 年 12 月 11 日
一共三个框,两个可以手动输入的都报错……
pppanda
    71
pppanda  
   2023 年 12 月 11 日   1
这个点很像网际快车的下载视图
857681664
    72
857681664  
OP
   2023 年 12 月 11 日
@kernelpanic
@abersheeran 学艺不精,给大伙笑话了(
LetsGiao
    73
LetsGiao  
   2023 年 12 月 11 日
@kernelpanic #69 这不周末做的嘛,要是工作日摸鱼做的,可能就 bug free 了
857681664
    74
857681664  
OP
   2023 年 12 月 11 日
@lzyoutlook
@zhuawadao 看到一个大兄弟提交了一个周粒度的 pr ,我看看没问题就可以发布了
Maiiiiii
    75
Maiiiiii  
   2023 年 12 月 11 日
一个小的建议,可以增加入学年纪的配置
v2er4241
    76
v2er4241  
   2023 年 12 月 11 日
日期不准确,而且样式超出了可视化边界。
857681664
    77
857681664  
OP
   2023 年 12 月 11 日
@klo424 日期的话只有在日粒度下是精确的,其他粒度下的日是不准确的
allgy
    78
allgy  
   2023 年 12 月 11 日
怎么跑起来啊,后端不懂这些
Loratad1ne
    79
Loratad1ne  
   2023 年 12 月 11 日
最高学历四个字和框框重叠啦
egonet
    80
egonet  
   2023 年 12 月 11 日
推荐个 ios App:生辰
AnYongMaple
    81
AnYongMaple  
   2023 年 12 月 11 日
众所周知,每年 9.1 是开学日,所以入学跟毕业时间都是错的
zjyl1994
    82
zjyl1994  
   2023 年 12 月 11 日
啊哈哈哈,我也有个类似的,只不过我显示的是退休年龄,你要不要加个 60 岁的标记位,每天看着还有点奔头
EarthChild
    83
EarthChild  
   2023 年 12 月 11 日
@rimworld #13 一样,你输入生日的时候手动输入 asd 等,就报错了
NessajCN
    84
NessajCN  
   2023 年 12 月 11 日
建议做成实时跳动的倒计时
您的生命还剩下:2428271618277 毫秒
southpark
    85
southpark  
   2023 年 12 月 11 日
@egonet #80 好久没有更新了,还需要一块钱
hbhh479q
    86
hbhh479q  
   2023 年 12 月 11 日
在生日那一栏,mac 系统用小键盘一输入 3 就报错
mohulai
    87
mohulai  
   2023 年 12 月 11 日
月日年的格式多少有点别扭
857681664
    88
857681664  
OP
   2023 年 12 月 11 日
@AnYongMaple 太严谨了,都忘了这茬
PsychoKidA
    89
PsychoKidA  
   2023 年 12 月 11 日
支持自定义修改么?比如硕士与大学本科间有一段时间的 Gap
857681664
    90
857681664  
OP
   2023 年 12 月 11 日
@PsychoKidA 暂时不支持,不过这个需求很合理,可以列入计划
churchmice
    91
churchmice  
   2023 年 12 月 11 日
你肝这玩意自己的进度条是不是又往后长了?
evil0harry
    92
evil0harry  
   2023 年 12 月 11 日
@sankemao 我也是
moe3000
    93
moe3000  
   2023 年 12 月 11 日
可以做个纵向时间轴那种?再加个自定义大事纪,自定义未来某目标
857681664
    94
857681664  
OP
   2023 年 12 月 11 日
@moe3000 可以的
zrPdwnBG4d370K5H
    95
zrPdwnBG4d370K5H  
   2023 年 12 月 11 日
小小建议:

除了在日颗粒度之外,今天是 xx 年 xx 月 xx 日 简化为显示到月或者不显示,要不然选择周今天是的日期不是当天日期,还以为你的服务器日期错了。
yyttrr
    96
yyttrr  
   2023 年 12 月 11 日
9 月 1 日前后出生的人可能入学差一年,这个可以处理一下,默认按照 9 月 1 号分
catamaran
    97
catamaran  
   2023 年 12 月 11 日   1
看完我哭了,没几个格子了
GG668v26Fd55CP5W
    98
GG668v26Fd55CP5W  
   2023 年 12 月 11 日 via iPhone   1
好家伙,整这么多 bug 成功吸引了我的注意。
OutOfMemoryError
    99
OutOfMemoryError  
   2023 年 12 月 11 日
@857681664 #90 以及专升本,实现周期也不大一样
ClaudeCode
    100
ClaudeCode  
   2023 年 12 月 11 日
bug 挺多的
1  2  
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5174 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 79ms UTC 09:37 PVG 17:37 LAX 01:37 JFK 04:37
Do have faith in what you're doing.
ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86