Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
tiaod

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

  •  1      
  •   tiaod · May 9, 2020 · 8641 views
    This topic created in 2377 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/
  • Demo
  • 时间
  • 进度
  • Wallpaper
    40 replies  •  2025-11-12 05:26:10 +08:00
    leeUp
    leeUp
    May 9, 2020❤️2
    1
    警告！你正在透支明天！哈哈哈哈挺有创意的😁
    hikaruchang
    hikaruchang
    May 9, 2020❤️2
    2
    -1 -1 -1 -1 ...
    XBlackBerry
    XBlackBerry
    May 9, 2020 via Android❤️1
    3
    -1s
    Smash
    Smash
    May 10, 2020 via Android
    4
    有 bug,还是特意的？进度条会超过百分之百
    liuy1994g
    liuy1994g
    May 10, 2020 via Android
    5
    @Smash 透支了啊😂
    liuy1994g
    liuy1994g
    May 10, 2020 via Android
    6
    有没有环形的呀
    leetao94
    leetao94
    May 10, 2020
    7
    点击访问～ 403

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

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

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

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

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

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

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

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

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

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