V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
tiaod

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

  •  1
     
  •   tiaod · May 9, 2020 · 7839 views
    This topic created in 2184 days ago, the information mentioned may be changed or developed.

    demo

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

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

    在线 DEMO

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

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

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

    Supplement 1  ·  May 12, 2020

    更新:

    • 支持设置背景图
    • 支持修改进度条颜色
    • 参数自动保存到url,方便复制到lively img
    Supplement 2  ·  May 25, 2020
    打不开的可以用这个地址:
    https://tiaod.github.io/day-progress/
    40 replies    2025-11-12 05:26:10 +08:00
    leeUp
        1
    leeUp  
       May 9, 2020   ❤️ 2
    警告!你正在透支明天!哈哈哈哈挺有创意的😁
    hikaruchang
        2
    hikaruchang  
       May 9, 2020   ❤️ 2
    -1 -1 -1 -1 ...
    XBlackBerry
        3
    XBlackBerry  
       May 9, 2020 via Android   ❤️ 1
    -1s
    Smash
        4
    Smash  
       May 10, 2020 via Android
    有 bug,还是特意的?进度条会超过百分之百
    liuy1994g
        5
    liuy1994g  
       May 10, 2020 via Android
    @Smash 透支了啊😂
    liuy1994g
        6
    liuy1994g  
       May 10, 2020 via Android
    有没有环形的呀
    leetao94
        7
    leetao94  
       May 10, 2020
    点击访问~ 403

    403 Forbidden
    Code: AccessDenied
    Message: You are denied by bucket referer rule
    Key: day-progress/index.html
    RequestId: NWViNzRhNzVfMWNiMjk0MGFfNmVmZl8yNDkxZTMw
    TraceId: OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTQ5YWUxMjNkYTk3NzdjZmZlMDQzOTgxOThkOTNlOWFkZjBjZjY5OGU2ZTBmZWM0MmE4YjI2OWU3YjQ2YTU5NTM=
    tiaod
        8
    tiaod  
    OP
       May 10, 2020 via Android   ❤️ 1
    @Smash 默认是 9:00~22:00,在 9:00 之前打开就会超过 100%,点击设置按钮可以调节时间。
    leetao94
        9
    leetao94  
       May 10, 2020
    ~~能正常访问了,这个和那个人生进度一样~看了引起不适😂😂😂
    hst001
        10
    hst001  
       May 10, 2020
    @XBlackBerry #3 几年前写的一个 chrome 主页插件就叫 -1s,现在不知道还能不能搜到了
    tiaod
        11
    tiaod  
    OP
       May 10, 2020
    @liuy1994g 环形的进度条已添加,点击设置就可以切换啦。如果有缓存就强制刷新一下
    deyilee
        12
    deyilee  
       May 10, 2020
    作为桌面非常棒!求教怎么在 wallpaper 上设置
    tiaod
        13
    tiaod  
    OP
       May 10, 2020
    @deyilee 可以用 wallpaper engine,不过我推荐开源的 lively,地址:
    https://github.com/rocksdanister/lively

    直接将在线 demo 的地址填进去就可以了: https://hacker-mu.uvcat.com/day-progress/
    fxt0706
        14
    fxt0706  
       May 10, 2020
    摸了一会鱼感觉没过多久,发现时间少了 1%,太真实了
    windplume
        15
    windplume  
       May 10, 2020
    方向是不是反了
    Vie
        16
    Vie  
       May 10, 2020
    打开一看,一股压力莫名袭来
    huyudong1991
        17
    huyudong1991  
       May 10, 2020 via Android
    php 版本就好了🤣
    tiaod
        18
    tiaod  
    OP
       May 10, 2020
    @windplume 要的就是这种血条减少一样的效果

    @huyudong1991 纯前端的,要 php 干啥🤣
    dr1q65MfKFKHnJr6
        19
    dr1q65MfKFKHnJr6  
       May 10, 2020
    可以加个 背景设置功能
    zhao1014
        20
    zhao1014  
       May 10, 2020 via Android
    设置成背景了,非常有用,我正需要这个!谢谢分享!
    hugsky
        21
    hugsky  
       May 10, 2020
    PS 了一个进度示意,不知是否有软件能实现类似效果。

    https://i.loli.net/2020/05/10/6QB72Eng19jbrRl.jpg
    eptwd
        22
    eptwd  
       May 10, 2020
    每天都这么焦虑了,这么搞像是在逼死自己。不如做一个周末倒计时。
    whywhywhy
        23
    whywhywhy  
       May 11, 2020
    奇怪,我显示器在这块深灰色的图片区域,会一闪一闪的。。。
    lithbitren
        24
    lithbitren  
       May 11, 2020
    半夜看到这个真 jb 焦虑
    c0xt30a
        25
    c0xt30a  
       May 11, 2020
    考虑下时区吧
    ares586
        26
    ares586  
       May 11, 2020
    不错的工具,放在工位上了~
    Artbox
        27
    Artbox  
       May 11, 2020
    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
        28
    tiaod  
    OP
       May 11, 2020
    @cedoo22 背景设置,这个可以有,但是我得看看怎么加,因为是纯前端的,看看怎么样把图片保存到前端

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

    @c0xt30a 应该不存在时区问题吧,直接读取浏览器时间来计算的。
    tiaod
        29
    tiaod  
    OP
       May 11, 2020
    @Artbox 是有点问题,其实算这个我也绕的有点晕,我看看怎么样完善一下
    zhangbohun
        30
    zhangbohun  
       May 11, 2020
    希望支持 url 参数配置,不然用做壁纸每次重启以后都会变回初始的设置,lively 好像不能保持 localstorage?
    SuckCat
        31
    SuckCat  
       May 11, 2020
    @XBlackBerry 5 月名单加急!!
    c2boy
        32
    c2boy  
       May 11, 2020
    设置成 9 点到 5 点半就能知道还有多久下班了
    stevenkang
        33
    stevenkang  
       May 11, 2020
    感谢分享。下班倒计时 get
    baozhuo
        34
    baozhuo  
       May 11, 2020 via iPhone
    借你的楼实现了一个微信小程序版的,搜“今日倒计时”可以看到🙈🙈
    TPOB
        35
    TPOB  
       May 11, 2020
    我这边 403 forbidden 诶
    yesqu
        36
    yesqu  
       May 12, 2020
    厉害啊!!!感谢分享,开个脑洞,如果要是可以在标题栏常驻或者 toolbar 上常驻应该效果很高吧!先挖个坑,等大神
    tiaod
        37
    tiaod  
    OP
       May 12, 2020   ❤️ 1
    @cedoo22 背景设置支持了,不过目前只支持填写图片地址,有自定义需求的话可以找图床上传图片。另外还支持了设置进度条的颜色。

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

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

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

    @TPOB 刷新下试试?还不行的话我 github pages 也传一份吧。目前是放在腾讯云的 cos
    dr1q65MfKFKHnJr6
        38
    dr1q65MfKFKHnJr6  
       May 12, 2020
    @tiaod 程序员 为啥这么多喜欢二次元的背景啊
    lanlan2020
        39
    lanlan2020  
       May 13, 2020
    ui 框架叫什么
    MomoBD
        40
    MomoBD  
       Nov 12, 2025
    @lanlan2020 #39 看设置页应该是 material ui?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   773 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 116ms · UTC 20:46 · PVG 04:46 · LAX 13:46 · JFK 16:46
    ♥ Do have faith in what you're doing.