V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
857681664
V2EX  ›  分享创造

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

  •  6
     
  •   857681664 ·
    zshnb · 333 天前 · 22865 次点击
    这是一个创建于 333 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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


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

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

    除了在日颗粒度之外,今天是 xx 年 xx 月 xx 日 简化为显示到月或者不显示,要不然选择周今天是的日期不是当天日期,还以为你的服务器日期错了。
    yyttrr
        96
    yyttrr  
       333 天前
    9 月 1 日前后出生的人可能入学差一年,这个可以处理一下,默认按照 9 月 1 号分
    catamaran
        97
    catamaran  
       333 天前   ❤️ 1
    看完我哭了,没几个格子了
    falcon05
        98
    falcon05  
       333 天前 via iPhone   ❤️ 1
    好家伙,整这么多 bug 成功吸引了我的注意。
    OutOfMemoryError
        99
    OutOfMemoryError  
       333 天前
    @857681664 #90 以及专升本,实现周期也不大一样
    yaocai321
        100
    yaocai321  
       333 天前
    bug 挺多的
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2709 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 14:21 · PVG 22:21 · LAX 06:21 · JFK 09:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.